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内 容 简 介 


本 书 第 3 版 紧 贴 互联 网 行业 发 展 对 Web 前 端 开发 工程 师 岗 位 的 新 要 求 ， 结 合 众 多 高 校 教师 的 教学 反馈 
意见 和 建议 , 在 第 2 版 的 基础 上 新 增加 了 HIML5 和 CSS3 相关 新 特性 和 新 应 用 。 全 书 详细 地 介绍 了 HIML、 
CSS、DIV、HTMLS5 基础 和 CSS3 应 用 、JavaScript、DOM 与 BOM、HTMLS 高 级 应 用 等 部 分 的 基本 语法 和 
关键 应 用 。 

本 书 内 容 编 排 结 构 合 理 ， 由 浅 入 深 ， 循 序 渐进 地 引导 读者 快速 入 门 ， 并 能 提高 初级 及 以 上 读者 的 实际 
应 用 水 平 ， 让 读者 能 够 快速 适应 移动 互联 网 行业 对 Web 前 端 开发 工程 师 岗位 的 新 需求 。 扫 描 每 章 提供 的 二 
维 码 可 观看 相应 知识 点 的 视频 讲解 。 

本 书 可 作为 高 等 学 校 计算 机 科学 与 技术 、 软 件 工程 、 信 息 管理 与 信息 系统 、 网 络 工程 、 物 联网 工程 、 
信息 科学 技术 、 数 字 媒 体 技 术 、 数 据 科 学 与 技术 (大 数据 管理 相关 ) 及 其 他 文 、 理 科 相 关 专 业 或 计算 机 公共 
基础 的 “网 页 开发 与 设计 ”“ 网 站 建设 与 网 页 制作 ”“Web 客户 端 编程 ”“Web 前 端 开发 技术 ”“Web 应 用 技 
术 ” 等 课程 教学 的 教材 ， 也 可 作为 IT 相关 岗位 的 工程 技术 人 员 参 考 用 书 ， 还 可 以 作为 初学 者 的 自学 读本 。 
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本 书 第 2 版 自 2016 年 8 月 由 清华 大 学 出 版 社 出 版 以 来 ， 受 到 全 国 各 类 高 等 院 校 的 青 
睐 。 教 材 覆 盖 地 域 宽 广 ， 教 材 使 用 层次 多 样 。 近 年 来 陆续 被 武汉 大 学 、 重 庆 大 学 、 吉 林 大 
学 、 北 京 理工 大 学 、 西 北 农林 科技 大 学 、 北 京 邮 电大 学 、 东 南大 学 、 河 海 大 学 、 上 海 大 学 
等 200 多 所 高 等 院 校 选 作 教材 或 教学 参考 书 。 教 材 第 1 版 获 “ 第 四 届 中 国 大 学 出 版 社 图 书 
奖 优秀 教材 二 等 奖 ”"。2016 年 第 2 版 理论 教材 与 实践 教材 双双 入 选 “ 教 育 部 高 等 学 校 软件 
工程 专业 教学 指导 委员 会 规划 教材 ”( 全 国 仅 2 部 教材 入 选 )。 

Web 前 端 开发 技术 已 经 成 为 21 世纪 高 等 学 校 学 生 及 IT 职员 跨 入 互联 网 世界 的 最 基础 
的 入 门 技术 。 随 着 “互联 网 +” 模 式 的 不 断 推广 与 普及 ，IT 行业 对 Web 前 端 开发 工程 师 所 
掌握 的 知识 和 能 力 要 求 也 随 之 提高 了 , 结合 IT 行业 发 展 的 需要 和 各 类 高 等 院 校 的 实际 教学 
反馈 , 编者 在 保持 前 2 个 版 本 教材 原 有 特色 和 编写 风格 的 基础 上 , 适时 将 HTML5 和 CSS3 
等 技术 补充 到 教材 之 中 ， 以 期 满足 当前 开 行业 需要 和 高 等 学 校 培 养 应 用 技术 型 人 才 的 需要 。 


教材 编写 特色 


内 容 新 颖 全 面 。 紧 贴 Web 前 端 开发 工程 师 的 岗位 需求 ， 精 心 策划 教学 内 容 。 全 面 讲解 
HIML、CSS、DIV、HTML5 基础 和 CSS3 应 用 、JavaScript、DOM 与 BOM、HTML5 高 
级 应 用 等 内 容 。 

实例 真实 丰富 。 从 商业 网 站 精 选 实例 ， 每 章 再 遂 选 一 个 经 典 的 综合 案例 ， 将 本 章 和 相 
邻 章节 的 知识 融会 贯通 。 

讲解 图 文 并 茂 。 使 用 大 量 图 表 、 图 片 进行 归纳 与 分 析 ， 以 提高 教学 效率 。 

代码 规范 统一 。 提 供 风 格 统一 、 格 式 规范 的 源 代 码 ， 培 养 读者 良好 的 编程 习惯 。 

微 课 视 频 精美 。 关 键 知识 和 操作 技能 配套 精美 的 微 课 视频 讲解 ， 让 学 生 无 师 自 通 。 


本 次 修订 内 容 


第 3 版 修订 教材 共 规划 了 17 章 。 保 留 第 2 版 中 的 第 1~4 章 ， 对 第 5 章 内 容 进行 更 新 
与 重组 , 将 第 2 版 中 的 第 12 章 框架 中 浮动 框架 部 分 并 入 新 版 的 第 5 章 中 ; 简化 第 6 章 图 像 
与 多 媒体 文件 ， 保 留 第 2 版 第 7 章 CSS 基础 、 第 8 章 DIV 与 SPAN、 第 9 章 CSS 样式 属 
性 、 第 10 章 DIV+CSS 页 面 布局 、 第 11 章 表格 ， 并 将 CSS3 中 的 属性 选择 器 补充 到 第 7 章 
中 ; 删除 第 2 版 中 第 12 章 框架 将 第 2 版 中 第 13 章 表单 改 为 第 3 版 的 第 12 章 表 单 ; 新 增 
第 13 章 HIML5 基础 和 CSS3 应 用 ; 保留 第 2 版 中 第 14 一 16 章 ; 删除 第 2 版 中 第 17 章 多 
浏览 器 兼容 性 测试 、 网 站 调试 与 发 布 ， 更 新 为 新 的 第 17 章 HTMLS5 高 级 应 用 。 同 时 根据 多 
数 使 用 高 校 教师 的 建议 和 反馈 意见 对 各 章节 内 容 和 案例 进行 优化 和 重组 。 

限于 篇 幅 ， 删 除 第 2 版 中 每 章 结尾 的 “网 站 赏析 ”“ 工 具 介 绍 ” 等 课外 资源 。 
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主要 内 容 


第 1 章 和 第 2 章 重点 介绍 了 Web 起 源 、Web 特点 与 工作 原理 、Web 前 端 开发 技术 、 开 
发 工具 及 HTML 基础 语法 和 文档 结构 等 知识 ; 第 3 一 6 章 重 点 介绍 了 HTML 网 页 中 格式 化 
文本 与 段落 、 列 表 、 超 链接 与 浮动 框架 、 图 像 与 多 媒体 文件 的 应 用 ;第 7 一 10 章 重 点 介绍 
了 CSS 基础 、DIV 与 SPAN、CSS 样式 属性 、DIV+CSS 页 面 布局 ; 第 11 一 12 章 重 点 介绍 
了 表格 、 表 单 等 页 面 布局 技术 ; 第 13 章 重点 介绍 了 HIMLS 基础 和 CSS3 应 用 ; 第 14 一 16 
章 重 点 介绍 了 JavaScript 基础 、JavaScript 程序 结构 、 事 件 分 析 、DOM 与 BOM 初步 应 用 ; 
第 17 章 重 点 介绍 了 HTML5 高 级 应 用 。 


教学 资源 


为 了 方便 各 类 高 校 选用 教材 进行 教学 和 读者 选 书 自学 ， 第 3 版 教材 依然 提供 了 大 量 的 
实例 代码 及 其 他 资源 。 教 材 中 教学 案例 以 统一 格式 进行 命名 ， 如 edu_2_1_1.html 表示 第 2 
章 2.1 节 第 1 个 案例 。 每 章 资源 以 子 目 录 形 式 存放 ， 如 ch5， 存 放 第 5 章 的 教学 资源 ， 有 教 
学 案例 、 图 片 、 音 视频 等 资源 。 同 时 还 同步 改编 了 配套 实验 与 实践 教材 《Web 前 端 开发 技 
术 实 验 与 实践 一 一 HTML5、CSS3、JavaScript( 第 3 版 )》， 除 此 之 外 ， 我 们 准备 了 各 种 辅助 
教学 材料 ， 包 括 : 

(1) 一 套 完整 的 教学 精简 版 的 PPT。 

(2) 一 套 完整 的 教学 案例 代码 。 

(3) 一 套 完整 的 教学 与 实验 中 所 需 的 图 片 、 文 字 、 音 视频 素材 。 

(4) 一 套 完整 的 练习 与 实验 参考 答案 。 

(5) 六 套 完整 的 课程 考试 试卷 及 参考 答案 。 

(6) 提供 案例 微 课 视 频 讲解 。 

第 3 版 修订 由 储 久 良 负 责 总 体 策划 、 编 著 、 审 校 。 南 京 理 工大 学 王 永 利 教授 、 叶 庆生 
副教授 ， 浙 江 工商 大 学 贾 波 教授 ， 西 北 农林 科技 大 学 蔚 继 承 副教授 ， 辽 宁 工 程 技术 大 学 陈 
虹 副 教授 、 肖 振 久 副教授 ， 常 熟 理工 学 院 高 燕 副 教授 ， 南 华 大 学 赵 艳 辉 副 教授 ， 唐 山 学 院 
党 长 青 教授 、 顾 永 军 副教授 ， 华 北 科技 学 院 胡 英 老师 ， 河 南 工 程 学 院 张 劳模 副教授 ， 成 都 
大 学 于 曦 副教授 ， 泰 州 学 院 刘 立 军 副教授 、 花 丽 副教授 ， 牡 丹 江 大 学 谢 凤 静 副 教授 等 对 教 
材 的 再 版 工作 提出 了 很 多 宝贵 意见 ， 在 此 对 他 们 表示 感谢 。 此 外 ， 姜 枫 、 袁 宝 华 、 曹 红 根 、 
高 广 银 、 李 从 、 刘 立 军 、 花 丽 、 宦 臣 、 沈 群 、 曹 诚 诚 、 张 晓 群 、 王 侈 等 教师 参与 了 教材 编 
写 工 作 ， 对 他 们 的 辛苦 劳动 表示 由 衷 感谢 ! 

本 书 的 修订 与 再 版 得 到 清华 大 学 出 版 社 相 关 人 员 的 大 力 支持 与 合作 ， 在 此 说 表示 衷心 
感谢 。 在 修订 过 程 中 , 编者 参阅 了 大 量 的 Web 前 端 开发 、JavaScript 应 用 、HTML5 和 CSS3 
相关 等 方面 的 书籍 与 网 络 资料 ， 在 此 对 这 些 书籍 与 资料 的 作者 表示 感谢 。 由 于 移动 互联 网 
技术 发 展 迅 速 , 加 上 编者 水 平 有 限 ， 书 中 的 不 足 在 所 难免 ,恳请 各 位 专家 和 读者 批评 指正 。 
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第 1 章 Web 前 端 开发 技术 综述 





本 章 学 习 目 标 


Web 是 一 种 典型 的 分 布 式 应 用 结构 。Web 应 用 中 的 信息 交换 与 传输 都 要 涉及 客户 端 和 
服务 器 端 。 因 此 ，Web 开发 技术 分 为 客户 端 开发 技术 (又 名 “Web 前 端 开发 技术 ") 和 服 
务 器 端 开发 技术 两 大 类 。 Web 前 端 (客户 端 ) 的 主要 任务 是 信息 内 容 的 呈现 和 用 户 界面 (User 
Interface，UI) 设计 。Web 前 端 开发 技术 主要 包括 HTML、CSS、JavaScripk DOM、BOM、 
AJAX、jQuery 及 其 他 插件 技术 。 学 习 完 本 章 后 读者 对 Web 前 端 开发 技术 能 有 一 个 总 体 的 
认识 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 了 解 Web 发 展 历史 。 

。 了 解 Web 前 端 开发 工程 师 的 职业 需求 。 

。 掌握 Web 网 站 相关 的 基本 概念 。 

。 理解 各 种 Web 前 端 开发 技术 及 其 在 Web 网 页 中 的 作用 。 

。 熟悉 各 种 常用 的 Web 前 端 开发 工具 、 浏 览 器 工具 ， 并 学 会 使 用 主流 开发 工具 。 


1.1 Web 概述 


1980 年 Tim Berers-Lee( 蒂 姆 . 伯 纳 斯 李 ) 在 欧洲 核子 研究 组 织 (European Organisation 
for Nuclear Research，CERN) 中 最 大 的 欧洲 核子 物理 实验 室 (European Particle Physics 
Laboratory，EPPL) 工作 时 建议 建立 一 个 以 超 文 本 系统 为 基础 的 项 目 ， 能 使 得 科学 家 之 间 
分 享 和 更 新 他 们 的 研究 结果 。 他 与 Robert Cailliau 〈 罗 伯 特 : 卡 里 奥 ) 一 起 建立 了 一 个 叫 作 
ENQUIRE 的 原型 系统 。 

1984 年 Tim Berners-Lee 重 返 欧洲 核子 物理 实验 室 ， 他 恢复 了 自己 过 去 的 工作 ， 并 创 
造 了 万 维 网 。 为 此 他 写 了 世界 上 第 一 个 客户 端 浏览 器 (World Wide Web， 也 是 一 个 编辑 器 ) 
和 第 一 个 Web 服务 器 httpd ( 超 文 本 传输 协议 守护 进程 )。Tim Bermers-Lee 建立 了 世界 上 的 
第 一 个 网 站 ， 网 址 是 http://info.cem.ch/hypertextWWW/TheProject.html， 现 在 的 网 址 是 
http://info.cern.ch/， 如 图 1-1 所 示 ， 并 于 1991 年 8 月 6 日 发 布 。 它 解释 了 什么 是 万 维 网 ， 
如 何 使 用 网 页 浏览 器 和 如 何 建立 一 个 Web 服务 器 等 .Tim Bemers-Lee 后 来 在 这 个 网 站 里 列 
举 了 其 他 网 站 ， 因 此 它 也 是 世界 上 第 一 个 万 维 网 导航 站 点 。 
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图 1-1 万 维 网 发 明 人 和 世界 上 的 第 一 个 网 站 


1.1.1 Web 的 起 源 


最 早 的 网 络 构想 可 以 追溯 到 1980 年 Tim Bermers-Lee 构建 的 ENQUIRE 项 目 。 这 是 一 
个 类 似 于 维基 百科 (wiki) 的 超 文本 在 线 编辑 数据 库 。 尽 管 这 与 现在 使 用 的 万 维 网 大 不 相同 ， 
但 是 它们 有 许多 相同 的 核心 思想 , 甚至 还 包括 一 些 Tim Bemers-Lee 的 万 维 网 之 后 的 下 一 个 
项 目 语义 网 中 的 构想 。 

1989 年 3 月 ，Tim Bemers-Lee 撰写 了 Information Management: A Proposal (关于 信息 
化 管理 的 建议 ) 一 文 ， 文 中 提 及 ENQUIRE 并 且 描 述 了 一 个 更 加 精巧 的 管理 模型 。1990 
年 11 月 12 日 他 和 Robert Cailliau 合作 提出 了 一 个 更 加 正式 的 关于 万 维 网 的 建议 。 在 1990 
年 11 月 13 日 他 在 一 台 NeXT 工作 站 〈 正 式 名 称 是 NeXT Computer) 上 写 了 第 一 个 网 页 以 
实现 他 文中 的 想法 ，NeXT 工作 站 如 图 1-2 所 示 ， 后 来 这 台 工 作 站 成 为 世界 上 第 一 台 互 联 
网 服务 器 。 





SIR TIM BERNERS LEE 
INVENTOR OF THEWORED WIDE WEB 





图 1-2 Tim Bermers-Lee 使 用 的 NeXT 工作 站 


在 那 年 的 圣诞 假期 ，Tim Bermers-Lee 设计 了 一 套 开展 网 络 工作 所 必需 的 所 有 工具 : 第 
一 个 万 维 网 浏览 器 (同时 也 是 编辑 器 ) 和 第 一 个 Web 服务 器 。 

1991 年 8 月 6 日 ， 他 在 althypertext 新闻 组 上 发 布 了 万 维 网 项 目 简介 的 文章 ， 这 一 天 
标志 着 因特网 上 万 维 网 公共 服务 的 首次 亮相 。 

万 维 网 中 至 关 重 要 的 概念 一 一 超 文 本 起 源 于 20 世纪 60 年 代 的 几 个 项 目 。 例如 Ted 
Nelson 〈 泰 德 -尼尔森 ) 的 Project Xanadu 项 目 和 Douglas Engelbart (道格拉斯 - 英 格 巴 特 ) 
的 NLS 项 目 。 这 两 个 项 目的 灵感 都 是 来 源 于 Vannevar Bush (万 尼 瓦 尔 -布什 ) 在 其 1945 





年 的 论文 《和 我 们 想 的 一 样 》 中 为 微缩 胶片 设计 的 “记忆 延伸 ”(Cmemex) 系统 。 

Tim Bemers-Lee 的 另 一 个 重大 突破 是 将 超 文 本 嫁接 到 因特网 上 。 在 他 的 书 Weaving the 
Web 《编织 网 络 》) 中 ， 他 解释 说 他 曾 一 再 向 这 两 种 技术 的 使 用 者 们 建议 它们 的 结合 是 可 
行 的 ， 但 是 却 没有 任何 人 响应 他 的 建议 ， 他 最 后 只 好 自己 执行 了 这 个 计划 。 他 发 明了 一 个 
全 球 网 络 资源 唯一 认证 的 系统 : 统一 资源 标识 符 〈Uniform Resource Identifier,，URI)。 

为 了 让 World Wide Web 不 被 少数 人 所 控制 ，Tim 组 织 成 立 了 World Wide Web 
Consortium, 即 通常 所 说 的 W3C, 致力 于 “引导 Web 发 挥 其 最 大 潜力 ”我 们 所 熟知 的 HTML 
协议 各 个 版 本 ， 都 出 自 W3C 会 议 。 可 贵 的 是 ，W3C 的 HTML 规范 是 以 “建议 ”的 形式 发 
布 ， 并 不 强迫 任何 厂商 或 个 人 接受 。 至 于 微软 利用 HTML 协议 的 开放 性 扩展 自己 的 标准 ， 
打败 Netscape， 应 该 是 Tim 始 料 未 及 的 事件 。 


1.1.2 Web 的 特点 


1， 易 导航 和 图 形 化 的 界面 

Web 非常 流行 的 一 个 很 重要 的 原因 就 在 于 它 可 以 在 一 页 上 同时 显示 色彩 丰富 的 图 形 和 
文本 ,而 在 Web 之 前 因特网 上 的 信息 只 有 文本 形式 。Web 具有 可 以 将 图 形 、 音 频 、 视 频 等 
信息 集 于 一 体 的 特性 。 同 时 ，Web 导航 非常 方便 ， 只 需要 从 一 个 链接 跳 到 另 一 个 链接 ， 就 
可 以 在 各 个 页 面 、 各 个 站 点 之 间 进 行 浏览 了 。 

2， 与 平台 无 关 性 

无 论 计 算 机 系统 是 什么 平台 , 都 可 以 通过 因特网 访问 WWW 浏览 WWW 对 计算 机 系 
统 平台 没有 任何 限制 。 从 Windows、UNIX、Macintosh 以 及 其 他 平台 都 能 通过 一 种 叫 作 浏 
览 器 (Browser) 的 软件 实现 对 WWW 的 访问 ， 如 Chrome、IE、Firefox 等 。 

3， 分 布 式 结构 

大 量 的 图 形 、 音 频 和 视频 信息 会 占用 相当 大 的 磁盘 空间 ， 事 先 很 难 预 知 信息 的 多 少 。 
对 于 Web 来 说 ,信息 可 以 放 在 不 同 的 站 点 上 ,而 没有 必要 集中 在 一 起 , 浏览 时 只 需要 在 浏 
览 器 中 指明 这 个 站 点 就 可 以 了 。 这 样 就 使 物理 上 不 一 定 在 一 个 站 点 的 信息 在 逻辑 上 是 在 一 
体 的 ， 从 用 户 的 角度 来 看 这 些 信息 也 是 一 体 的 。 

4. 动态 性 

由 于 各 Web 站 点 的 信息 包含 站 点 本 身 的 信息 , 信息 的 提供 者 可 以 经 常 对 站 上 的 信息 进 
行 更 新 与 维护 。 一 般 来 说 ， 各 信息 站 点 都 尽量 保证 信息 的 时 效 性 ， 所 以 Web 站 点 上 的 信息 
需要 动态 更 新 ， 这 一 点 可 以 通过 信息 的 提供 者 实时 维护 。 

$5， 交互 性 

Web 的 交互 性 首先 表现 在 它 的 超 链接 上 ， 用 户 的 浏览 顺序 和 所 访问 的 站 点 完全 由 用 户 
自己 决定 。 另 外 通过 表单 Form 的 形式 可 以 从 服务 器 方 获 得 动态 的 信息 。 用 户 通过 填写 Form 
可 以 向 服务 器 提交 请 求 ， 服 务 器 根据 用 户 的 请 求 返 回响 应 信息 。 


1.1.3 ”Web 工作 原理 
用 户 通过 客户 端 浏 览 器 访问 因特网 上 的 网 站 或 者 其 他 网 络 资源 时 ， 通 常 需要 在 客户 端 


的 浏览 器 的 地 址 栏 中 键入 需要 访问 网 站 的 统一 资源 定位 符 (Uniform Resource Locator， 
URL), 或 者 通过 超 链接 方式 链接 到 相关 网 页 或 网 络 资源 ; 然后 通过 域名 服务 器 进行 全 球 域 
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名 解析 ， 并 根据 解析 结果 决定 访问 指定 人 P 地 址 (IP address) 的 网 站 或 网 页 。 

获取 网 站 的 P 后 ， 客 户 端的 浏览 器 向 指定 IP 地 址 上 的 Web 服务 器 发 送 一 个 HITP 
(Hypertext Transfer Protocol， 超 文本 传输 协议 ) 请 求 ， 在 通常 情况 下 ，Web 服务 器 会 很 快 
响应 客户 端的 请 求 , 将 用 户 所 需要 的 HIML 文本 、 图 片 和 构成 该 网 页 的 其 他 一 切 文件 发 送 
回 用 户 。 如 果 需 要 访问 数据 库 系 统 中 的 数据 时 ，Web 服务 器 会 将 控制 权 转 给 应 用 服务 器 ， 
根据 Web 服务 器 的 数据 请 求 读 写 数据 库 ， 并 进行 相关 数据 库 的 访问 操作 ， 应 用 服务 器 将 数 
据 查 询 响应 发 送 给 Web 服务 器 ， 由 Web 服务 器 再 将 查询 结果 转发 给 客户 端的 浏览 器 ， 浏 
览 器 将 客户 端 请 求 的 页 面 内 容 组 成 一 个 网 页 显示 给 用 户 。 这 就 是 Web 的 工作 原理 ， 如 图 
1-3 所 示 。 


Web 服 务 器 文档 


domain.com 


Index.html 
images 










客户 湾 / 训 昨 吕 ccs 
CR 到 在 


应 用 服务 器 
图 1-3 ”Web 工作 原理 


大 多 数 网 站 的 网 页 中 包含 很 多 超 链接 ， 有 内 链接 和 外 链接 。 通 过 超 链 接 可 以 设置 资源 
下 载 、 页 面 浏览 及 链接 其 他 网 络 资源 。 像 这 样 通过 超 链 接 ， 把 有 用 的 相关 资源 组 织 在 一 起 
的 集合 ， 就 形成 了 一 个 所 谓 的 信息 的 “网 ”。 这 个 网 运行 在 因特网 上 ， 使 用 十 分 方便 ， 就 构 
成 了 最 早 在 1990 年 初 Tim Berners-Lee 所 说 的 万 维 网 。 


1.1.4 Web 相关 概念 


1，URL 统一 资源 定位 器 

URL (Uniform Resource Locator) 即 统一 资源 定位 器 (或 统一 资源 定位 符 )， 可 以 理解 
为 网 页 地 址 。 如 同 在 网 络 上 的 门牌 ， 是 因特网 上 标准 的 资源 的 地 址 (Address)。 由 Tim 
Bermers-Lee 发 明 用 来 作为 万 维 网 的 地 址 。 现 在 它 已 经 被 万 维 网 联盟 编制 为 因特网 标准 
RFC1738。 

URL 由 协议 、 主 机 域名 及 路 径 和 文件 名 三 个 部 分 组 成 ， 其 构成 如 下 所 示 : 


协议 类 型 : / /服务 器 地 址 (端口 号 /路 径 /文件 名 


第 一 部 分 是 协议 〈 或 称 为 服务 类 型 )， 如 表 1-1 所 示 ; 
第 二 部 分 是 资源 主机 的 域名 或 他 地 址 〈 包 括 端口 号 )，http 默认 的 端口 号 是 80; 
第 三 部 分 是 主机 资源 的 具体 地 址 ， 如 目录 和 文件 名 等 。 


第 一 部 分 和 第 二 部 分 之 间 用 “://” 符 号 隔 开 ， 第 二 部 分 和 第 三 部 分 用 “/” 符 号 隔 开 。 
第 一 部 分 和 第 二 部 分 是 不 可 缺少 的 ， 第 三 部 分 有 时 可 以 省 略 。 下 面 是 一 些 例子 : 
http://www.edu.cn/kexuetansuo 12385/index.shtml 


ftp://ftp.pku.edu.cn/ 
http://58.195.195.22:8089/web/index.html 


表 1-1 URL 中 的 协议 类 型 











序 号 服务 (协议 ) 类 型 命 奖 
1 http 超 文 本 传输 协议 
加 https 用 加 密 传送 的 超 文 本 传输 协议 
3 fp 文件 传输 协议 
4 mailto 电子 邮件 地 址 
5 ldap 轻 量 目录 访问 协议 
6 news Usenet 新 闻 组 
2 file 本 地 计算 机 或 网 上 分 享 的 文件 
8 gopher Intemet Gopher protocol (因特网 查找 协议 ) 
2，Web 服务 器 


Web 服务 器 也 称 为 网 站 ,是 指 在 因特网 上 提供 Web 访问 服务 的 站 点 , 是 由 计算 机 软件 
和 硬件 组 成 的 有 机 整体 。 网 站 一 般 采 用 PHP、JSP、ASP 等 技术 开发 而 成 B/S(Browser/Server) 
架构 ， 一 般 由 若干 个 网 页 有 序 地 组 织 在 一 起 ， 第 一 个 网 页 也 称 为 主页 ， 所 以 主页 的 设计 非 
常 重要 。 通 常 需要 为 Web 服务 器 配置 IP 地 址 和 域名 ， 才 能 对 外 提供 Web 服务 。 

3， 超 链接 

Web 页 面 一 般 是 由 若干 超 链 接 构成 。 所 谓 超 链接 (Hyper Link)， 是 指 从 一 个 网 页 指向 
另 一 个 目标 的 连接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相同 网 页 上 的 不 同位 置 ， 
还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程序 。 

文本 超 链 接 在 浏览 器 中 表现 为 带 有 下 画 线 的 文字 ， 将 鼠标 移动 到 文字 上 时 ， 浏 览 器 会 
将 光标 转变 为 手 的 形状 。 如 图 1-4 所 示 为 世界 上 第 一 个 网 页 上 的 超 链 接 。 

网 页 中 超 链接 的 格式 如 下 所 示 : 


<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Browse the 
first website</a> 

| 

| € > e [oOmoceme 分 | 和 :| 


http://info.cern.ch - home of the first 
website 










超 链接 


From here you cam 


一 一 he first website using the line-mode browser simulator 


Learn about CERN. the ohvsics laboratory where the web was born | 
Bn me 
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1.2 Web 前 端 开发 工程 师 的 职业 需求 


2005 年 以 后 ， 互 联网 进入 Web 2.0 时 代 ， 网 站 的 客户 端 〈 前 端 ) 由 此 发 生 了 翻天 履 地 
的 变化 。 网 站 不 再 是 Web 1.0 时 代 承 载 单一 的 文字 和 图 片 的 信息 提供 者 ， 富 媒体 (Rich 
Media，RM) 让 网 站 的 内 容 更 加 生动 ， 软 件 化 的 交互 形式 为 用 户 提供 了 更 好 的 使 用 体验 。 
Web 2.0 时 代 更 注重 用 户 的 交互 作用 ， 用 户 成 为 网 站 内 容 的 浏览 者 和 提供 者 ， 网 站 需要 前 
端 技 术 来 实现 。 


1.2.1 Web 前 端 开 发 的 由 来 


Web 前 端 开发 是 从 网 页 制作 演变 而 来 的 ， 名 称 上 有 很 明显 的 时 代 特 征 。Web 前 端 开发 
工程 师 是 一 个 很 新 的 职业 ， 在 国内 乃至 国际 上 真正 开始 受到 重视 的 时 间 不 超过 10 年 。 

随 着 Web 2.0 概 念 的 普及 和 W3C 组 织 的 推广 ,网 站 重 构 的 影响 力 正 以 惊人 的 速度 增长 。 
HTML+CSS 布局 、DHTML 和 AJAX 像 一 阵 旋 风 ， 铺 天 盖 地 席卷 而 来 ， 包 括 新 浪 、 搜 狐 、 
网 易 、 腾 讯 、 淘 宝 等 在 内 的 各 行 各 业 的 IT 企业 都 对 自己 的 网 站 进行 了 重 构 。 

随 着 人 们 对 用 户 体验 的 要 求 越 来 越 高 ， 前 端 开发 的 技术 难度 越 来 越 大 ，Web 前 端 开发 
工程 师 这 一 职业 终于 从 设计 和 制作 不 分 的 局 面 中 独立 出 来 。 

我 国 互 联网 行业 的 发 展 呈 现 迅猛 的 增长 势头 ， 对 网 站 开发 、 设 计 制 作 的 人 才 需 求 随 之 
大 增 。Web 前 端 开发 正 是 采用 HTML、CSS、div、JavaScript、DOM、AJAX 等 技术 实现 网 
站 整体 风格 优化 与 改善 用 户 体 验 的 工作 。 在 欧美 技术 发 达 国 家 里 ， 前 端 开发 和 后 台 开 发 人 
员 的 比例 为 1 : 1， 而 在 我 国 目 前 依旧 在 1 : 3 以 下 ， 人 才 缺 口 较 大 。 截 至 2016 年 6 月 ， 中 
国 网 站 数量 为 454 万 个 。 目 前 我 国 各 行业 领域 几乎 都 要 建设 自己 的 网 站 ， 网 络 调查 结果 表 
明 ， 未 来 几 年 ， 国 内 各 大 行业 对 Web 前 端 开发 方面 的 人 才 需 求 量 将 会 大 幅度 提升 ，Web 前 
端 开 发 工程 师 也 会 日 益 受到 重视 。 


1.2.2 Web 前 端 开发 工程 师 的 职业 要 求 


Web 前 端 开 发 工程 师 的 职业 要 求 是 利用 HIML、CSS、JavaScript、DOM、AJAX 等 各 
种 Web 技术 进行 产品 的 界面 开发 。 编 写 标准 、 优 化 的 代码 ， 并 增加 交互 动态 功能 ， 开 发 
JavaScript 以 及 Flash 模块 , 同时 结合 后 台 开 发 技术 模拟 整体 效果 , 进行 富 互联 网 应 用 (Rich 
Internet Applications，RIA) 的 Web 开发 ， 致 力 于 通过 技术 改善 用 户 体验 ， 这 需要 对 用 户 体 
验 、 交 互 操作 流程 及 用 户 需 求 有 深入 理解 。 

一 位 优秀 的 Web 前 端 开发 工程 师 在 知识 体系 上 既 要 有 广度 ， 又 要 有 深度 。 以 前 会 
Photoshop 和 Dreamweaver 就 可 以 制作 网 页 ， 现 在 只 掌握 这 些 已 经 远 远 不 够 了 。 无 论 是 在 
开发 难度 上 ， 还 是 在 开发 方式 上 ， 现 在 的 网 页 制作 都 更 接近 传统 的 网 站 后 台 开 发 ， 所 以 现 
在 不 再 叫 网 页 制作 , 而 是 叫 Web 前 端 开 发 。Web 前 端 开发 在 产品 开发 环节 中 的 作用 变 得 越 
来 越 重要 ， 需 要 更 专业 的 前 端 工 程 师 才 能 做 好 ， 这 方面 的 专业 人 才 近 年 来 备 受 青睐 。Web 
前 端 开 发 是 一 项 很 特殊 的 工作 ， 涵 盖 的 知识 面 非常 广 ， 要 求 既 有 具体 的 技术 ， 又 有 抽象 的 
理念 。 简 单 地 说 ， 其 主要 职责 就 是 把 网 站 的 界面 更 好 地 呈现 给 用 户 。 

Web 前 端 开 发 工程 师 具 体 技术 要 求 如 下 : 








(1) 必须 掌握 基本 的 Web 前 端 开发 技术 , 其 中 包括 HTML5、CSS3、JavaScript、 DOM、 
BOM、Ajax 等 。 在 掌握 这 些 技术 的 同时 ， 还 要 清楚 地 了 解 它们 在 不 同 浏览 器 上 的 兼容 性 情 
况 、 泻 染 原理 和 存在 的 问题 。 

(2) 必须 掌握 网 站 性 能 优化 、 搜 索引 擎 优化 SEO) 和 服务 器 端 开 发 技术 的 基础 知识 。 

(3) 必须 学 会 运用 各 种 Web 前 端 开发 与 测试 工具 进行 辅助 开发 。 

(4) 除了 要 掌握 技术 层面 的 知识 ， 还 要 掌握 理论 层面 的 知识 ， 包 括 Web 视觉 设计 、 网 
站 配色 、 网 站 交互 设计 模式 、 代 码 的 可 维护 性 、 组 件 的 易 用 性 、 分 层 语 义 模板 和 浏览 器 分 
级 支持 等 。 


1.3” Web 前 端 开 发 技术 


随 着 因特网 技术 飞速 发 展 与 普及 ，Web 技术 也 在 同步 发 展 , 并 且 应 用 领域 越 来 越 宽广 。 
WWW (World Wide Web) 已 经 是 这 个 时 代 不 可 或 缺 的 信息 传播 载体 。 全 球 范围 内 的 资源 
互通 互 访 、 开 放 共 享 已 经 成 为 WWW 最 有 实际 应 用 价值 的 领域 。 开 发 具有 用 户 动态 交互 、 
富 媒体 应 用 的 新 一 代 Web 网 站 需要 HIML、CSS、JavaScript、DOM、AJAX 等 组 合 技 术 ， 
其 中 HIML、CSS、JavaScript 三 大 技术 称 为 “Web 标准 三 剑客 ”。 


1.3.1 HTML 


HIML (Hypertext Markup Language) 是 超 文本 标记 语言 。 它 是 一 种 标记 语言 ， 而 不 是 
编程 语言 。HTML 是 Web 页 面 的 结构 。HTML 使 用 标记 来 描述 网 页 。 网 页 的 内 容 包括 标题 、 
副标题 、 段 落 、 无 序列 表 、 定 义 列表 、 表 格 、 表 单 等 。 

HIML 是 SGML (Standard Generalized Markup Language， 标 准 通用 标记 语言 ) 下 的 一 
个 应 用 (也 称 为 一 个 子 集 ), 也 是 一 种 标准 规范 , 它 通过 标记 符号 来 标记 要 显示 的 网 页 中 的 
各 个 部 分 。 而 SGML 是 一 种 定义 电子 文档 结构 和 描述 其 内 容 的 国际 标准 语言 ， 是 所 有 电子 
文档 标记 语言 的 起 源 。 

HTML 文档 是 用 来 描述 网 页 ， 由 HIML 标记 和 纯 文 本 构成 的 文本 文件 。Web 浏览 器 
可 以 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 出 它们 。 例 如 在 Chrome 浏览 器 的 URL 中 输 
入 网 址 http://www.edu.cn， 所 看 到 的 网 页 就 是 浏览 器 对 HTML 文件 进行 解释 的 结果 ， 如 图 
1-5 所 示 。 
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右 击 网 页 的 任何 位 置 ， 从 弹出 菜单 中 选择 “查看 网 页 源 代 码 ” 如 图 1-6 所 示 。 其 中 
<head>、<meta>、<title>、<link> 等 都 是 HTML 的 标记 ， 浏 览 器 能 够 正确 地 理解 这 些 标 记 ， 
并 呈现 给 用 户 。 
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下 面 简单 介绍 HTML 超 文 本 标记 语言 的 发 展 历史 。 

。 HTML1.0: 1993 年 6 月 ， 互 联网 工程 工作 小 组 (IETF) 发 布 工作 草案 ; 

。 HTMIL2.0: 1995 年 11 月， 发 布 RFC1866， 在 RFC2854 于 2000 年 6 月 发 布 之 后 被 
宣布 已 经 过 时 ; 

HTML3.2: 1996 年 1 月 14 日 发 布 ，W3C 推荐 标准 ; 

HTMIL4.0: 1997 年 12 月 18 日 发 布 ，W3C 推荐 标准 ; 

HIML4.01: 1999 年 12 月 24 日 发 布 ，W3C 推荐 标准 ; 

HTML5: 2014 年 10 月 28 日 发 布 ，W3C 推荐 标准 。 


1.3.2 CSS 


由 于 Netscape 和 Microsoft 两 家 公司 在 自己 的 浏览 器 软件 中 不 断 地 将 新 的 HTML 标记 
和 属性 (例如 字体 标记 和 颜色 属性 ) 添加 到 HTML 规范 中 ， 导 致 创建 具有 清晰 的 文档 内 
容 并 独立 于 文档 表现 层 的 站 点 变 得 越 来 越 困 难 。 为 了 解决 这 个 问题 ，Hakon Wium Lie〈 哈 
肯 。 维 姆 “ 莱 ， 挪 威 ) 和 Bert Bos〈 伯 特 。 波 斯 ， 荷 兰 ) 于 1994 年 共同 发 明了 级 联 样式 表 。 

1. CSS 的 作用 

级 联 样式 表 (Cascading Style Sheet，CSS)， 也 称 为 层 叙 样式 表 。 在 设计 Web 网 页 时 
采用 CSS 技术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 
控制 。 只 要 对 相应 的 代码 做 一 些 简单 的 修改 ， 就 可 以 改变 同一 页 面 的 不 同 部 分 ， 或 者 同一 
个 网 站 的 不 同 页 面 的 外 观 和 格式 。 采 用 CSS 技术 是 为 了 解决 网 页 内 容 与 表现 分 离 的 问题 。 

CSS 语言 是 一 种 标记 语言 ， 不 需要 编译 ， 属 于 浏览 器 解释 型 语言 ， 可 以 直接 由 浏览 器 
解释 执行 。CSS 标准 由 W3C 的 CSS 工作 组 制定 和 维护 。 

2. CSS 的 发 展 历史 

。 CSS1: 1996 年 12 月 17 日 发 布 ，W3C 推荐 标准 。 

。 CSS2: 1999 年 1 月 11 日 发 布 ，W3C 推荐 标准 ，CSS2 添加 了 对 媒介 〈 打 印 机 和 听 

觉 设 备 )、 可 下 载 字体 的 支持 。 
。 CSS3: 计划 将 CSS 划分 为 更 小 的 模块 ， 这 些 模块 包括 盒子 模型 、 列 表 模块 、 超 链 


接 方 式 、 语 言 模块 、 背 景 和 边框 、 文 字 特效 、 多 栏 布局 等 。 
1.3.3 JavaScript 


在 HTML 基础 上 ， 使 用 JavaScript 可 以 开发 交互 式 Web 页 面 。JavaScript 的 出 现 使 得 
网 页 和 用 户 之 间 实 现 了 一 种 实时 性 的 、 动 态 的 、 交 互 性 的 关系 ， 使 网 页 包含 更 多 活跃 元 素 
和 更 加 精彩 的 内 容 。 这 也 是 JavaScript 与 HIML DOM 共同 构成 Web 网 页 的 行为 。 

1， JavaScript 由 来 

JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚本 语言 .同时 也 是 
一 种 广泛 用 于 客户 端 Web 开发 的 脚本 语言 ， 常 用 来 给 HTML 网 页 添加 动态 的 功能 ， 例 如 
响应 用 户 的 各 种 操作 。JavaScript 最 初 由 Netscape 的 Brendan Eich 〈 布 兰 登 。 艾 奇 ) 设计 ， 
是 一 种 由 Netscape 的 LiveScript 发 展 而 来 、 原 型 化 继承 面向 对 象 动态 类 型 的 客户 端 脚本 语 
言 ， 主 要 目的 是 为 服务 器 端 脚本 语言 提供 数据 验证 的 基本 功能 。 在 Netscape 与 Sun 合作 之 
后 ，LiveScript 更 名 为 JavaScript， 同 时 JavaScript 也 成 为 原 Sun 公司 的 注册 商标 。 欧 洲 计 
算 机 制造 商 协会 (European Computer Manufacturers Association，ECMA) 以 JavaScript 为 
基础 制定 了 ECMAScript 标准 。 

2，JavaScript 的 组 成 

一 个 完整 的 JavaScript 实现 是 由 以 下 三 个 不 同 部 分 组 成 的 : 

。 核心 (ECMAScript)。 

。 文档 对 象 模 型 (Document Object Model，DOMD)。 

。 浏览 器 对 象 模 型 (Browser Object Model,，BOM)。 


1.3.4 HTML DOM 


HTML DOM( Document Object Model) 是 HTML 文档 对 象 模 型 的 缩写 ,根据 W3C DOM 
规范 ，DOM 是 一 种 与 浏览 器 、 平 台 语言 无 关 的 接口 ， 使 得 用 户 可 以 访问 页 面 上 其 他 的 标 
准 组 件 。DOM 与 JavaScript 结合 起 来 实现 了 Web 网 页 的 行为 与 结构 的 分 离 。 

1. DOM 由 来 

简单 理解 ，DOM 解决 了 Netscape 的 JavaScript 和 Microsoft 的 JScript 之 间 的 冲突 ， 为 
Web 设计 师 和 开发 者 提供 了 一 个 处 理 HTML 或 XML 文档 标准 的 方法 ,方便 访问 站 点 中 的 
数据 、 脚 本 和 表现 层 对 象 。 

借助 于 JavaScript 可 以 重 构 整个 HTML 文档 ， 可 以 添加 、 移 除 、 改 变 或 重 排 页 面 上 的 
元 素 。JavaScript 需要 获得 对 HTML 文档 中 所 有 元 素 进行 访问 的 入 口 ， 这 个 入 口 连 同 对 
HTML 元 素 进行 添加 、 移 动 、 改 变 或 移 除 的 方法 和 属性 ， 都 是 通过 文档 对 象 模型 DOM 来 
获得 的 ，HTML DOM 定义 了 访问 和 操作 HTML 文档 的 标准 方法 。 

2. HTML DOM Level 

。 DOM Level 1: 1998 年 10 月 发 布 ，W3C 推荐 规范 , 含有 DOM Core 和 DOM HIML 





两 个 模块 。 
。 DOM Level 2: 引入 DOM 视图 、DOM 事件 、DOM 样式 、DOM 遍历 和 范围 ， 用 于 
处 理 新 的 接口 类 型 。 


。 DOM Level 3: 引入 以 统一 的 方式 载 入 和 保持 文档 的 方法 , 包含 在 新 模块 DOM Load 
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and Save 和 DOM Validation 方法 ， 进 一 步 扩展 了 DOM。 
1.3.5 BOM 


BOM (Browser Object Model) 也 称 浏览 器 对 象 模型 。 浏览 器 对 象 模型 定义 了 JavaScript 
可 以 进行 操作 的 浏览 器 的 各 个 功能 部 件 的 接口 , 提供 访问 文档 各 个 功能 部 件 (如 窗口 本 身 、 
屏幕 功能 部 件 、 浏 览 历史 记录 等 ) 的 途径 以 及 操作 方法 。 

IE 3.0 和 Netscape Navigator 3.0 浏览 器 提供 了 一 个 浏览 器 对 象 模 型 特性 ， 可 以 对 浏览 
器 窗口 进行 访问 和 操作 。 使 用 BOM， 开 发 者 可 以 移动 窗口 、 改 变 状态 栏 中 的 文本 以 及 执 
行 其 他 与 页 面 内 容 不 直接 相关 的 动作 。 由 于 没有 相关 的 BOM 标准 ， 每 种 浏览 器 都 有 自己 
的 BOM 实现 的 方法 。 有 一 些 事实 上 的 标准 ， 如 具有 一 个 窗口 对 象 和 一 个 导航 对 象 ， 不 过 
每 种 浏览 器 都 可 以 为 这 些 对 象 或 其 他 对 象 定 义 自己 的 属性 和 方法 。 

BOM 主要 处 理 浏览 器 窗口 和 框架 ， 不 过 通常 浏览 器 特定 的 JavaScript 扩展 都 被 看 作 
BOM 的 一 部 分 。 这 些 扩展 包括 : 

。 弹出 新 的 浏览 器 窗口 。 

。 移动 、 关 闭 浏览 器 窗口 以 及 调整 窗口 大 小 。 
提供 Web 浏览 器 详细 信息 的 定位 对 象 。 
提供 用 户 屏 幕 分 辨 率 详 细 信 息 的 屏幕 对 象 。 
对 cookie 的 支持 。 
Internet Explorer 对 BOM 进行 扩展 以 包括 ActiveX 对 象 类 ， 可 以 通过 JavaScript 来 
实现 ActiveX 对 象 。 

常见 BOM 对 象 有 Window 对 象 、Navigator 对 象 、Screen 对 象 、History 对 象 、Location 
对 象 等 。 


1.3.6 AJAX 


AJAX (Asynchronous JavaScript and XML) 也 称 异步 JavaScript 和 XML， 在 Web 2.0 
的 热潮 中 ， 已 成 为 人 们 谈论 最 多 的 技术 术语 。AJAX 是 多 种 技术 的 综合 ， 它 使 用 XHTML 
和 CSS 标准 化 呈现 ， 使 用 DOM 实现 动态 显示 和 交互 ， 使 用 XML 和 XSTL 进行 数据 交换 
与 处 理 , 使 用 XMLHttpRequest 对 象 进行 异步 数据 读 取 , 使 用 JavaScript 绑 定 和 处 理 所 有 数 
据 。 更 重要 的 是 它 打 破 了 使 用 页 面 重 载 的 惯例 技术 组 合 , 可 以 说 AJAX 已 成 为 Web 开发 的 
重要 武器 。 

传统 的 网 页 (不 使 用 AJAX) 如 果 需 要 更 新 内 容 , 必须 重 载 整 个 网 页 页 面 , 而 使 用 AJAX 
则 可 以 部 分 更 新 网 页 内 容 。 有 很 多 使 用 AJAX 的 应 用 程序 案例 ， 如 新 浪 微 博 、Google 地 
图 、 开 心 网 等 。 

通过 AJAX， 可 以 使 用 JavaScript 的 XMLHttpRequest 对 象 来 直接 与 服务 器 进行 通信 ， 
不 再 需要 重 载 页 面 与 Web 服务 器 交换 数据 。 

AJAX 在 浏览 器 与 Web 服务 器 之 间 使 用 异步 数据 传输 (HTTP 请 求 ), 这 样 就 可 使 网 页 
从 服务 器 请 求 少量 的 信息 ， 而 不 是 整个 页 面 。 





1.3.7 jQuery 


jQuery 是 一 套 跨 浏览 器 的 JavaScript 库 , 简化 HTML 与 JavaScript 之 间 的 操作 。 由 John 
Resig 在 2006 年 1 月 的 BarCamp NYC 上 发 布 第 一 个 版 本 。 目 前 是 由 Dave Methvin 领导 的 
开发 团队 进行 开发 。 全 球 前 10000 个 访问 量 最 高 的 网 站 中 ， 有 59% 使 用 了 jQuery， 它 是 目 
前 最 受 欢迎 的 JavaScript 库 。 

jQuery 由 美国 人 John Resig 创建 ， 至 今 已 吸引 了 来 自 世 界 各 地 的 众多 JavaScript 高 手 
加 入 其 开发 团队 ， 包 括 来 自 德国 的 Jorn Zaefferer、 罗 马 尼 亚 的 Stefan Petre 等 。jQuery 是 继 
prototype JS 框架 之 后 又 一 个 优秀 的 JavaScript 框架 。 其 宗旨 是 “Write Less,Do More”， 即 
“ 写 更 少 的 代码 ， 做 更 多 的 事情 ”。 


1.4 Web 前 端 开 发 工具 


在 HIML 基础 上 ， 使 用 JavaScript 可 以 开发 交互 式 Web 页 面 。JavaScript 的 出 现 使 得 
网 页 和 用 户 之 间 实 现 了 一 种 实时 性 的 、 动 态 的 、 交 互 性 的 关系 ， 使 网 页 包含 更 多 活跃 元 素 
和 更 加 精彩 的 内 容 。 而 用 于 开发 Web 前 端 应 用 工具 有 很 多 ， 可 以 根据 使 用 习惯 进行 选择 。 


1.4.1 EditPlus 


EditPlus 是 Windows 下 的 一 个 文本 、HTML、PHP 以 及 Java 编辑 器 。 它 不 但 是 记事 本 
的 一 个 很 好 的 代替 工具 ， 同 时 它 也 为 网 页 制作 者 和 程序 设计 员 提 供 了 许多 强大 的 功能 。 对 
HIML、PHP、Java、C/C++、CSS、ASP、Perl、JavaScript 和 VBScript 的 语法 有 突出 显示 。 
同时 , 根据 自 定义 语法 文件 它 能 够 扩展 支持 其 他 程序 语言 。 无 颖 网 络 浏览 器 预览 HTML 页 
面 , 以 及 FTP 命令 上 载 本 地 文件 到 FTP 服务 器 。 EditPlus V4.0 软件 程序 界面 如 图 1-7 所 示 ， 
其 中 HTML 默认 加 载 模板 tamplate html 编码 类 型 已 经 由 ANSI 改 为 UTF-8。 














和 
1 <!--edu 1 3 1.html--> 
2 <!doctype html> 
3o <html lang="en"> 


| 
| 
49 <head> 
5 <meta charset="UTF-8"> 编码 为 UTF-8 
6 <title> CSS 样 式 应 用 </title> 
7 <style type="text/css"> -| 


FN 


图 1-7 EditPlus 程序 界面 


1.4.2 Adobe Dreamweaver 


Adobe Dreamweaver (前 称 Macromedia Dreamweaver) 是 Adobe 公司 的 著名 网 站 开发 
工具 ， 是 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 的 网 页 编辑 器 ， 利 用 它 可 以 轻而易举 
地 制作 出 跨越 平台 限制 和 浏览 器 限制 的 充满 动感 的 网 页 。 程 序 界面 如 图 1-8 所 示 。 
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图 1-8 ”Dreamweaver 程序 界面 


目前 有 Mac 和 Windows 系统 的 版 本 。 Adobe Dreamweaver CS6 提供 了 一 套 直 观 的 可 视 
界面 ， 可 以 创建 和 编辑 HTML 网 站 和 移动 应 用 程序 。 


1.4.3 Sublime Text 
Sublime Text 支持 多 种 编程 语言 的 语法 高 亮 、 拥 有 优秀 的 代码 自动 完成 功能 ， 还 拥有 


代码 片段 (Snippet) 的 功能 ， 可 以 将 常用 的 代码 片段 保存 起 来 ， 在 需要 时 随时 调用 ;支持 
VIM 模式 、 支 持 宏 。 使 用 此 软件 写 代 码 ， 会 提高 编码 的 速度 与 效率 。 程 序 界面 如 图 1-9 所 示 。 














图 1-9 Sublime Text 程序 界面 


1.4.4 WebStorm 


WebStorm 是 JetBrains 公司 旗下 的 一 款 JavaScript 开发 工具 。 目 前 已 经 被 广大 中 国 JS 
开发 者 誉 为 Web 前 端 开发 神器 、 最 强大 的 HIMLS5 编辑 器 、 最 智能 的 JavaScript IDE 等 。 
与 IntelliJIDEA 同 源 ， 继 承 了 IntelliJIDEA 强大 的 JS 部 分 的 功能 。 程 序 界面 如 图 1-10 所 示 。 
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图 1-10 ”WebStorm 程序 界面 


1.4.5 HBuilder 


HBuilder 是 DCloud (数字 天 堂 ) 推出 的 一 款 支持 HTML5 的 Web 开发 IDE。HBnuilder 
的 编写 用 到 了 Java、C、Web 和 Ruby。HBuilder 本 身 主体 是 由 Java 编写 ， 它 基于 Eclipse， 
所 以 顺 其 自然 地 兼容 了 Eclipse 的 插件 。 快 ， 是 HBuilder 的 最 大 优势 ， 通 过 完整 的 语法 提 
示 和 代码 输入 法 、 代 码 块 等 ， 大 幅 提升 HTML、JS、CSS 的 开发 效率 。 程 序 界 面 如 图 1-11 
所 示 。 
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1-11 HBuilder 程序 界面 


1.5 浏览 器 工具 


使 用 HTML、CSS、JavaScript 组 合 技术 设计 的 Web 网 站 ， 需 要 经 过 发 布 ， 才 能 通过 
浏览 器 来 观看 其 设计 效果 。 基 于 Intemet 的 各 类 网 页 浏览 器 有 很 多 ， 据 StatCounter 和 Net 
Applications 两 大 市 场 研究 公司 统计 分 析 ，2017 年 10 月 和 6 月 全 球 浏览 器 市 场 份额 统计 结 
果 表 现 : 排名 全 球 前 五 名 的 浏览 器 分 别 是 Google Chrome、Microsoft IE、Mozilla Firefox、 
Safari、Opera。 由 于 两 家 公司 计算 方法 不 同 ， 造 成 浏览 器 排名 顺序 不 同 。 其 市 场 占有 份额 
分 别 如 图 1-12 和 图 1-13 所 示 。 




















2017. 10 浏 览 器 市 场 份额 统计 2017. 6 浏览 器 市 场 份额 统计 
FireFox, Opera, I A other, 
6.08% 3.89% 3. 74% .00 ;人 活 
UC SS FireFox, 
Browser. Shrome, 12.00% 
7. 86% 54. 57% Chrome, 
IE, 22. 00%, 60. 00% 
safari, 
14. 59% 
图 1-12” ”StatCounter 统计 数据 图 1-13 Net Applications 统计 数据 


各 类 浏览 器 对 应 的 标识 如 图 1-14 所 示 。 作 为 Web 前 端 开发 工程 师 一 定 要 了 解 不 同济 
览 器 的 使 用 性 能 和 特点 ， 了 解 它 们 的 差异 性 , 在 编写 Web 网 页 代码 时 才能 充分 考虑 到 浏览 
器 的 兼容 性 ， 让 网 站 在 不 同 浏览 器 中 显示 效果 与 风格 相同 。 
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图 1-14 主流 浏览 器 对 应 的 标识 





1.S.1 Internet Explorer 


Internet Explorer 是 微软 公司 推出 的 一 款 网 页 浏览 器 。 虽 然 自 2004 年 以 来 Internet 
Explorer 丢失 了 一 部 分 市 场 占有 率 ， 但 依然 是 使 用 最 广泛 的 网 页 浏览 器 。 竞 争 对 手 主要 有 
Chrome、Firefox、Safari、Opera 等 。 目 前 最 新 版 本 是 IE 11.0， 用 户 可 根据 自己 的 计算 机 配 
置 选择 安装 相关 版 本 的 浏览 器 。 


1.5.2 Google Chrome 


Google Chrome， 又 称 Google 浏览 器 ， 是 一 个 由 Google 公司 开发 的 开源 网 页 浏览 器 。 
该 浏览 器 基于 其 他 开源 代码 软件 编写 ， 包 括 WebKit 和 Mozilla， 目 标 是 提升 稳定 性 、 速 度 
和 安全 性 ， 并 创造 出 简单 且 高 效 的 使 用 者 界面 。 软 件 的 名 称 来 自 于 称 作 Chrome 的 网 络 浏 
览 器 图 形 用 户 界 面 (Graphic User Interface,GUI)。 软 件 的 beta (测试 ) 版 本 在 2008 年 9 月 
2 日 发 布 ， 提 供 43 种 语言 版 本 ， 有 支持 Windows、Mac OS X 和 Linux 版 本 并 提供 下 载 。 
Chrome 也 成 为 使 用 最 广泛 的 浏览 器 。 


1.5.3 Mozilla Firefox 


Mozilla Firefox 中 文 名 通常 称 为 “火狐 ” 是 一 个 开源 网 页 浏览 器 , 使 用 Gecko 引擎 ( 即 
非 正 内 核 )， 可 以 在 多 种 操作 系统 如 Windows、Mac 和 Linux 上 运行 。Firefox 由 Mozilla 
基金 会 与 数 百 个 志愿 者 所 开发 ， 原 名 “Phoenix”( 凤 凰 )， 之 后 改名 “Mozilla Firebird”( 火 
鸟 )， 再 改 为 现在 的 名 字 ，Firefox 的 市 场 份额 在 全 球 荣 居 第 三 位 。 


1.5.4 Safari 


Safari 是 苹果 计算 机 的 最 新 操作 系统 Mac OS X 中 新 的 浏览 器 ,用 来 取代 之 前 的 nternet 
Explorer for Mac。Safari 使 用 了 KDE 的 KHTML 作为 浏览 器 的 计算 核心 。 目 前 该 浏览 器 已 
支持 Windows 平台 , 但 是 与 运行 在 Mac OS X 上 的 Safari 相 比 ， 有 些 功能 出 现 丢 失 。Safari 
也 是 iPhone 手机 、iPod Touch、iPad 平板 电脑 iOS 的 指定 默认 浏览 器 。 


1.5.5 Opera 


Opera 浏览 器 是 一 款 由 挪威 Opera Software ASA 公司 制作 的 支持 多 页 面 标签 式 浏览 的 
网 络 浏览 器 ， 是 跨 平台 的 浏览 器 , 可 以 在 Windows、Mac、FreeBSD、Solaris、BeOS、OS/2、 
QNX、Linux 等 多 种 操作 系统 上 运行 。Opera 浏览 器 创始 于 1995 年 4 月 , 到 2017 年 10 月 ， 
官方 发 布 的 个 人 计算 机 用 的 最 新 版 本 为 Opera48。 此 外 ，Opera 还 有 手机 用 的 版 本 ， 如 在 
Windows Mobile 和 Android 手机 上 安装 的 Opera Mobile 和 Opera Mini， 也 支持 多 语言 ， 包 
括 简体 中 文 和 繁体 中 文 。 


1.6 综合 实例 


以 Web 前 端 开发 技术 综合 运用 为 例 ， 介 绍 运用 HIML、CSS、JavaScript = 
现 Web 网 页 设计 。 代 码 如 下 所 示 ， 其 页 面 效 果 如 图 1-15 所 示 。 


1 <!-- edu 1 6 1.html --> 
2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
<meta charset="UTF-8"> 
<title>Web 前 端 开发 技术 初步 应 用 </title> 
<style type="text/css"> 
p{font-size:20px;color:red;text-indent:2em;} 
h3{font-size:24px; font-weight:bolder;color:#000099;} 
</style> 
</head> 
<body> 
<h3>Web 前 端 开发 技术 </h3> 
<p>HTML</p> 
<p>Css</p> 
<p>JavaSscript</p> 
<h3> 网 络 学 习 资 源 </h3> 
<a href="http://www.w3school.com.cn/html/">HTML 教 程 </a> 
9 <script type="text/javascript"> 
20 alert ("Web 前 端 开发 工程 师 就 业 前 景 好 、 待 遇 高 ! ") ; 
21 <*/acript> 
22 </body> 
23 </html> 
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1-15 ”Web 前 端 开发 技术 综合 实例 页 面 


上 述 代码 中 第 8 行 定义 段落 P 了 标记 样式 为 字 大 小 为 20px、 颜 色 为 红色 、 段 落 缩 进 2 个 
字符 ; 第 9 行 定义 3 号 标题 字 h3 标记 样式 为 字 大 小 为 24px、 字 体 粗细 为 特 粗 、 颜 色 为 
#000099; 第 12 一 22 行 是 HTML 的 主体 ， 包 含 标题 字 、 段 落 、 超 链接 、 脚 本 标记 的 定义 ， 
其 中 第 13 行 、 第 17 行 定义 h3 标题 字 ， 第 14 一 16 行 定义 3 个 段落 了 标记， 第 18 行 定义 
超 链接 a 标志 ， 第 19 一 21 行 定义 脚本 script 标记 ， 在 其 中 插入 告警 消息 框 alert0 输 出 信息 





第 
1 
章 


Jeb 房 交 开发 不 承 毋 汪 


Web 把 端 开 竹 磺 大 一 一 HTML5、CSS3、JavaScript (第 3 斤 ) 





“Web 前 端 开发 工程 师 就 业 前 景 好 、 待 遇 高 !”。 
本 章 小 结 


本 章 从 Web 概述 、Web 前 端 开发 工程 师 职业 要 求 、Web 前 端 开发 技术 、Web 前 端 开发 
工具 、Web 浏览 器 五 大 方面 对 Web 前 端 开发 技术 进行 综述 。 

重点 阐述 了 Web 概述 、Web 起 源 、Web 特点 、Web 工作 原理 。 为 适应 互联 网 行业 迅速 
发 展 对 IT 开发 人 才 的 需要 ， 介 绍 了 Web 前 端 开 发 工程 师 这 一 紧缺 岗位 的 职业 需求 。 

Web 前 端 开发 技术 重点 介绍 了 Web 网 页 设计 的 “三 剑客 ”分别 是 HTML、CSS、JavaScript， 
三 者 在 网 页 设计 中 作用 各 不 相同 。 其 中 HTML 是 Web 网 页 的 内 容 ; CSS 是 Web 网 页 的 表 
现 ，JavaScript 和 HTML DOM 是 网 页 的 行为 ， 实 现 网 页 的 动态 、 交 互 的 功能 。AJAX 在 浏 
览 器 与 Web 服务 器 之 间 使 用 异步 数据 传输 ， 这样 就 可 使 网 页 从 服务 器 请 求 少量 的 信息 ,而 
不 是 整个 页 面 。jQuery 是 一 套 跨 浏览 器 的 JavaScript 库 ， 简 化 HTML 与 JavaScript 之 间 的 
操作 。 

Web 前 端 开发 工具 重点 介绍 了 目前 Web 前 端 开发 常用 的 工具 。 

Web 浏览 器 重点 介绍 各 大 主流 网 络 浏览 器 ， 通 过 使 用 了 解 浏 览 器 之 间 的 差异 。 


练习 与 实验 


练习 1 


1， 选 择 题 
(1) HTML 是 一 种 ( ) 语言 。 

A. 编译 型 B. 超 文本 标记 。 C. 高 级 程序 设计 D. 面向 对 象 的 编程 
(2) 世界 上 第 一 个 网 页 是 污 


A. http://www.w3c.org B. http://info.cern.ch 
C. http://www.microsoft.com D. http://www.baidu.com 
(3) 访问 FTP 站 点 使 用 的 协议 类 型 是 (  )。 
A. http B. ftp C. https D. mailto 
(4) 下 列 不 是 开发 HTML 网 页 的 软件 是 (  )。 
A. EditPlus B. NotePad C. TextPad D. Visual BASIC 
(5) 设计 JavaScript 语言 的 公司 是 天 
A. Netscape B. Microsoft C. Sun D. Google 
2. 填空 题 


(1) HTML 文档 是 由 构成 的 文件 。 

(2) 世界 上 第 一 个 网 站 的 发 明 人 是 

(3) 从 正 浏 览 器 菜单 中 选择 命令 ,可 以 在 打开 的 记事 本 中 查看 网 页 的 源 代码 。 
(4) 列 出 常用 的 Web 前 端 开发 工具 (三 个 以 上 ) § a 





(5) HTML 的 全 称 是 。URL 的 全 称 是 ceSS 





的 全 称 是 。AJAX 的 全 称 是 
(6) 列 出 常用 的 主流 网 络 浏览 器 〈 三 个 以 上 ) 
3. 简 答题 


(1) 简 述 Web 的 工作 原理 。 

(2) Web 具有 哪些 特点 ? 

(3) 写 出 URL 的 格式 ， 并 说 明 它 的 组 成 及 作用 。 

(4) 分 别 说 明 HTML、CSS、JavaScript 在 Web 网 页 设计 中 的 作用 。 


实验 1 


1. 学 会 使 用 NotePad 和 EditPlus 等 编辑 软件 将 综合 实例 的 代码 输入 到 编辑 器 中 ， 并 
进行 调试 ， 通 过 浏览 器 查看 网 页 效果 并 与 图 1-15 进行 比较 。 

2. 下 载 HBuilder、Sublime Text、WebStorm 等 软件 ， 练 习 使 用 各 种 编辑 器 软件 ， 试 比 
较 各 自 的 优 缺 点 。 


Web 毛 庙 开 八 习 厌 绪 闪 
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本 章 学 习 目标 


通过 本 章 的 学 习 ， 能 够 掌握 HTML 基本 组 成 结构 ， 理 解 HTML 头 部 head 和 主体 body 
两 大 部 分 在 网 页 设计 中 的 作用 。 理 解 head、body 标记 中 可 以 包含 哪些 标记 ; 理解 HTML 
标记 的 作用 及 标记 语法 ， 理 解 标记 的 类 型 ， 学 会 编写 简易 的 Web 网 页 代码 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

掌握 HTML 文档 的 基本 结构 。 

理解 标记 类 型 、 标 记 语 法 。 

学 会 body 标记 属性 的 设置 方法 。 

学 会 给 网 页 添加 注释 。 

理解 元 信息 meta 标记 的 作用 。 


2.1 HTML 文档 结构 


HTML 文档 由 头 部 head 和 主体 body 两 个 部 分 组 成 。 头 部 head 标记 中 可 以 定义 标题 、 
样式 等 ， 头 部 信息 不 显示 在 网 页 上 ; 主体 body 标记 中 可 以 定义 段落 、 标 题字 、 超 链接 、 脚 
本 、 表 格 、 表 单 等 元 素 ， 主 体内 容 是 网 页 要 显示 的 信息 。 

HTML 文档 基本 结构 


<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<meta name="Keywords" content=""> 沁 这 是 头 部 
<meta name="Description" content=""> 
<title>Web 网 页 标题 </title> 

</head> 

<body> 





</body> | 这 是 主体 
</html> 


【 例 2-1-1】HTML 文档 的 基本 结构 展示 。 页 面 效果 如 图 2-1 所 示 。 
< 

之 程序 名 称 : edu 2 1 1.html 
3 程序 功能 : HTML 文档 结构 

4 设计 人 员 : Web 前 端 开发 工程 师 
5 设计 时 间 : 2017/5/31 


6 --> 
7 <!doctype html> 
8 <html lang="en"> 


9 <head> 

10 <meta charset="UTF-8"> 

和 <title> HTMIL 文 档 结构 </title> 

12 <style type="text/css"> 

13 p{font-size:24px; /* 定义 字体 大 小 */ } 
14 </style> 

15 </head> 

16 <body> 

17 <p>HTMI 文 档 结构 由 head、body 标 记 组 成 </p> 
18 <h3> 标 题字 h3</h3> 

19 <hr size=3 color="red"> 

20 <a href="http://www.baidu.com"> 百 度 </a> 
LE <script type="text/javascript"> 

22 document .write ("这 是 简单 的 网 页 ! ") ; ”// 向 页 面 输出 信息 
23 </script> 

24 </body> 

25 </html> 
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HTML 文 档 结构 由 head、body 标 记 组 成 
标题 字 h3 








百度 这 是 简单 的 网 页 





图 2-1 HTML 文档 结构 展示 


HTML 文档 以 <html> 标 记 开始 ， 以 </html> 标 记 结 束 。 所 有 的 HTML 代码 都 位 于 这 两 
个 标记 之 间 。 浏 览 器 根据 HTML 文档 类 型 和 内 容 来 解释 整个 网 页 ， 然 后 呈现 给 用 户 。 一 般 
情况 下 ， 每 个 HTML 文档 都 应 该 有 且 只 有 一 个 html、head 和 body 元 素 。 

代码 解释 

代码 中 第 9 一 15 行 是 头 部 标记 所 包含 的 代码 ， 头 部 标记 所 包含 的 内 容 不 会 在 网 页 上 显 
示 ; 第 16 一 24 行 是 主体 标记 所 包含 的 代码 ， 也 是 网 页 要 显示 的 主要 信息 。 


2.2 头 部 head 


HTML 文档 的 头 部 head 标记 主要 包含 页 面 标题 标记 、 元 信息 标记 、 样 式 标 记 、 脚 本 标 
记 、 链 接 标 记 等 。 头 部 head 标记 所 包含 的 信息 一 般 不 会 显示 在 网 页 上 。 
2.2.1 标题 title 标记 

基本 语法 

<title> 标 题 信息 显示 在 浏览 器 的 标题 栏 上 </title> 

语法 说 明 


HTML 套 矶 


册 N 让 


Web 所 详 开 和 八 太 天 一 一 HTML5、CSS3、JavaScript ( 劳 3 眠 ) 





title 标记 是 成 对 标记 ，<title> 是 开始 标记 ，</title> 是 结束 标记 ,两 者 之 间 的 内 容 为 显示 
在 浏览 器 的 标题 栏 上 的 信息 。 
【 例 2-2-1】 标题 title 标记 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 2-2 所 示 。 


1 <!-- edu 2 2 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 页 面 标题 </title> 

7 </head> 

8 <body> 

9 页 面 标题 显示 在 浏览 器 的 标题 栏 上 
10 </body> 

11 </html> 








Ge 





标题 信息 显示 在 浏览 器 标题 栏 





图 2-2 标题 title 标记 应 用 


2.2.2 ”元 信息 meta 标记 


meta 标记 用 来 描述 一 个 HTML 网 页 文档 的 属性 ， 也 称 为 元 信息 (meta-information》， 
这 些 信息 并 不 会 显示 在 浏览 器 的 页 面 中 ， 例 如 作者 、 日 期 和 时 间 、 网 页 描述 、 关 键 词 、 页 
面 刷新 等 。meta 标记 是 单个 标记 ， 位 于 文档 的 头 部 ， 其 属性 定义 了 与 文档 相关 联 的 “名 称 


/ 值 ”对 。 
1，meta 标记 
基本 语法 
<meta name="" content=""> 
<meta http-equiv="" content=""> 
属性 说 明 
meta 属性 主要 分 为 两 组 : 
name 属性 与 content 属性 。 


name 属性 用 于 描述 网 页 ， 它 是 “名 称 / 值 ”形式 中 的 名 称 ，name 属性 的 值 所 描述 的 内 
容 通过 content 属性 表示 ， 便 于 搜索 引擎 机 器 人 查找 、 分 类 。 其 中 最 重要 的 是 description、 
keywords 和 robots。 

http-equiv 属性 与 content 属性 。 

http-equiv 属性 用 于 提供 HITP 协议 的 响应 头 报 文 ， 它 回应 给 浏览 器 一 些 有 用 的 信息 ， 
以 帮助 正确 和 精确 地 显示 网 页 内 容 。 它 是 “名 称 / 值 ”形式 中 的 名 称 ，http-equiv 属性 的 值 
所 描述 的 内 容 通过 content 属性 表示 。meta 标记 的 属性 、 取 值 和 说 明 如 表 2-1 所 示 。 


表 2-1 meta 标记 属性 、 取 值 及 说 明 表 











属 性 值 说 明 
author 定义 网 页 作者 
description 定义 网 页 简短 描述 
keywords 定义 网 页 关键 词 
generator 定义 编辑 器 
content-type 内 容 类 型 
ei expires 网 页 缓存 过 期 时 间 
refresh 刷新 与 跳 转 〈 重 定向 ) 页 面 
set-cookie 如 果 网 页 过 期 ， 那 么 存盘 的 cookie 将 被 删除 
content Some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 





2，meta 标记 的 使 用 方法 
1) name 属性 设置 


<meta name="keywords" content=" 信 息 参 数 " /> 
<meta name="description" content=" 信 息 参数 " /> 
<meta name="author" content=" 信 息 参数 "/> 
<meta name="generator" content=" 信 息 参 数 " /> 
<meta name="copyright" content=" 信 息 参 数 "> 
<meta name="robots" content=" 信 息 参数 "> 


robots 告诉 搜索 引擎 机 器 人 抓 取 哪些 页 面 。 其 属性 取 值 及 说 明 如 表 2-2 所 示 。 
表 2-2 ”robots 属性 值 及 说 明 表 


ww 














值 说 明 
all 文件 将 被 检索 ， 且 页 面 上 的 链接 可 以 被 查询 
none 文件 将 不 被 检索 ， 且 页 面 上 的 链接 不 可 以 被 查询 
index 文件 将 被 检索 
noindex 文件 将 不 被 检索 ， 但 页 面 上 的 链接 可 以 被 查询 
follow 页 面 上 的 链接 可 以 被 查询 
nofollow 文件 将 被 检索 ， 但 页 面 上 的 链接 不 可 以 被 查询 


2) http-equiv 属性 设置 


1 <meta http-equiv="cache-control " content="no-cache">; 

2 <meta http-equiv="refresh" content=" 时 间 ; ”url= 网 址 参数 "> 

3 <meta http-equiv="content-type" content="text/html; charset= 信 息 参 数 " /> 
4 <meta http-equiv="expires" content=" 信 息 参数 " /> 


第 1 行 说 明 禁 止 浏览 器 从 本 地 计算 机 的 缓存 中 访问 页 面 内 容 ， 同 时 访问 者 将 无 法 脱 机 
浏览 。 第 2 行 说 明 多 长 时 间 网 页 自动 刷新 , 加 上 URL 中 的 网 址 参数 就 代表 多 长 时 间 自 动 链 
接 其 他 网 址 。 第 3 行 中 的 content-type 代表 的 是 HTTP 协议 的 头 部 , 它 可 以 向 浏览 器 传 回 一 
些 有 用 的 信息 ， 以 帮助 正确 和 精确 地 显示 网 页 内 容 ， 与 之 对 应 的 属性 值 为 content，content 
中 的 内 容 其 实 就 是 各 个 参数 的 变量 值 。 第 4 行 设置 meta 标记 的 expires (期限 )， 可 以 用 于 
设 定 网 页 在 缓存 中 的 过 期 时 间 。 一 旦 网 页 过 期 ， 必 须 到 服务 器 上 重新 传输 。 网 页 到 期 时 间 
设置 格式 如 下 所 示 : 
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<meta http-equiv="expires" content="Fri 12 Jan 2001 18:18:18 GMT"> 
注意 : 必须 使 用 GMT 的 时 间 格 式 ， 或 直接 设 为 0 (数字 表示 多 少时 间 后 过 期 ) 。 
在 HTML5 规范 和 新 版 本 软件 中 ， 第 3 行 meta 标记 已 经 改 为 下 列 简洁 形式 : 


<meta charset="UTF-8"> 


【 例 2-2-2】 元 信息 meta 标记 的 应 用 ， 代 码 如 下 所 示 。 


1 <!-- edu 2 2 2.html -> 
2 <!doctype html> 
3 <html lang="en"> 


<head> 
<title> 中 国教 育 和 科研 计算 机 网 CERNET</title> 
<meta charset="UTF-8"> 
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"> 
<meta name="keywords"” content=" 中 国教 育 网 , 中 国教 育 , 科研 发 展 ,教育 信息 
化 , CERNET, CERNET2, 下 一 代 互联 网 , 人 才 , 人 才 服 务 , 教师 招聘 ,教育 资源 ,教育 服 
务 ,教育 博客 ,教育 黄页 ,教育 新 闻 , 教 育 资讯 " /> 
9 <meta name="description" content=" 中 国教 育 网 (中 国教 育 和 科研 计算 机 网 》 
是 中 国 最 权威 的 教育 门户 网 站 ， 是 了 解 中 国教 育 的 对 内 、 对 外 窗口 。 网 站 提供 关于 中 国 
教育 、 科 研发 展 、 教 育 信息 化 、CERNET 等 新 闻 动 态 、 最 新 政策 ， 并 提供 教师 招聘 、 高 
考 信息 、 考 研 信息 、 教 育 资源 、 教 育 博客 、 教 育 黄页 等 全 面 多 样 的 教育 服务 。"” /> 
10 <meta name="copyright" content="www.edu.cn" /> 
11 <meta name="robots" content="all" /> 
12 </head> 
13 <body> 
14 <p> 这 是 中 国教 育 和 科研 计算 机 网 的 头 部 部 分 标记 的 应 用 </p> 
15 </body> 
16 </html> 


代码 解释 

代码 是 参照 “中 国教 育 和 科研 计算 机 网 ”的 首页 部 分 代码 改写 而 成 的 。 通 过 此 段 代 码 
的 示范 让 读者 能 够 掌握 在 页 面 中 如 何 正 确 地 使 用 meta 标记 。 代 码 中 第 2 行 是 定义 HTML 
文档 类 型 (HTML5); 第 8 一 11 行使 用 meta 标记 定义 了 属性 name 的 值 分 别 为 keywords、 
description、copyright、robots 及 相应 的 content 的 属性 值 。 


2.3 主体 body 





co aow 心 


主体 body 是 一 个 Web 页 面 的 主要 部 分 ， 其 设置 内 容 是 读者 实际 看 到 的 网 页 信息 。 所 
有 WWW 文档 的 主体 部 分 都 是 由 body 标记 定义 的 。 在 主体 body 标记 中 可 以 放置 网 页 中 所 
有 的 内 容 ， 如 图 片 、 图 像 、 表 格 、 文 字 、 超 链接 等 元 素 。 


2.3.1 body 标记 


1. 基本 语法 
<body> 
这 是 网 页 的 内 容 .… 


</body> 


2. 语法 说 明 
Se 台 标 记 ，</body> 是 结束 标记 。 两 者 之 间 所 包括 的 内 容 为 网 页 上 显示 的 
信息 。 
【 例 2-3-1】 在 body 标记 中 插入 相关 标记 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 2-3 所 示 。 
一 (=e 








Web 前 端 开发 技术 课程 简介 


《Web 前 端 开 发 技术 >》 课程 是 计算 机 科学 与 技术 rs 人 人 门 基础 课 
和 通过 对 7 ep ee 








图 2-3 主体 body 标记 的 应 用 


da 2 3 Thtnl 一 -> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 2 

6 <title> 简 易 网 页 设计 </title> 视频 讲解 
7 <style type="text/css"> 

8 p{text-indent :2em; /* 首 行 缩 进 2 个 字符 */} 

9 </style> 

10 </head> 

11 <body text="green"> 

12 <h3 align="center">Web 前 端 开发 技术 课程 简介 </h3> 

13 <hr color="red"> 

14 <p>《Web 前 端 开发 技术 》 课 程 是 计算 机 科学 与 技术 、 信 息 管理 与 信息 系统 、 软 件 工 


程 等 专业 的 一 门 基 础 课程 ， 也 是 其 他 计算 机 相关 专业 的 公共 基础 课程 ,通过 对 Web 前 
端 开发 三 大 主流 技术 学 习 和 研究 ， 让 学 生理 解 和 掌握 HTML、JavaScript、CSS 等 
相关 知识 ， 通 过 实验 培养 学 生 设 计 与 开发 Web 站 点 的 基本 操作 技能 。</p> 

15 </body> 

16 </html> 

3. 代码 解释 

代码 中 第 11 一 15 行 是 主体 部 分 ， 其 中 第 12 行 是 插入 h3 标记 修饰 标题 ;第 13 行 是 插 

入 水 平分 隔 线 标记 并 设置 成 红色 ; 第 14 行 是 插入 一 个 段落 p 标记 介绍 课程 。 


2.3.2 body 标记 属性 


设置 body 标记 属性 可 以 改变 页 面 的 显示 效果 。 该 标记 主要 属性 有 topmargin 、 
leftmargin、text、bgcolor、background、link、alink、vlink。HTMLS5 中 可 以 使 用 CSS 属性 
蔷 代 。 

1. 基本 语法 

<body leftmargin="50px" topmargin="50px" text="#000000" bgcolor="#339999" 

link="blue" alink="white" vlink="red" background="body image.jpg"> 

2. 属性 说 明 

body 标记 属性 、 取 值 及 说 明 如 表 2-3 所 示 。 
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表 2-3 ”body 标记 属性 、 取 值 及 说 明 表 


























属 性 值 说 明 
rgb(r,g,b) rgb 函数 〈 整 数 ) ,r、g、b 取 值 范围 为 0 一 255。 
ITgb(Gr90.890.b90) ITgb 函数 〈 百 分 比 ) ,r、g、b 的 值 范围 为 0 一 100。 
ge 坟 Tggbb 或 坟 gb 十 六 进 制 数据 (6 位 或 3 位 )， 如 坟 rggbb 或 四 gb，I、g、b 
为 十 六 进 制 数 ， 取 值 范围 0~9、A~F。 例 如 #3F0， 可 
转换 为 #33FF00。 
colorname 颜色 的 英文 名 称 ， 如 red、green、blue 等 
bgcolor 同上 规定 文档 的 背景 颜色 。 不 赞成 使 用 
alink 同上 规定 文档 中 活动 链接 的 颜色 。 不 赞成 使 用 
link 同上 规定 文档 中 未 访问 链接 的 默认 颜色 。 不 赞成 使 用 
Vlink 同上 规定 文档 中 已 被 访问 链接 的 颜色 。 不 赞成 使 用 
background URL 规定 文档 的 背景 图 像 。 不 赞成 使 用 
topmargin pixel 规定 文档 中 上 边 距 的 大 小 
leftmargin pixel 规定 文档 中 左边 距 的 大 小 


1 <!-- edu 2 3 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 日 
名 <meta charset="UTF-8"> 视频 讲解 
6 <title> body 属 性 应 用 </title> 

学 <meta name="Generator" content="EditPlus"> 

8 <meta name="Author" content=" 储 久 良 "> 

9 <style type="text/css"> 

10 div{background:#99cccc;width:500px;height:150px;} 

1 </style> 


2 </head> 

13 <body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link= 
"rgb(0%,100%,0%)" alink="white" vlink="red" topmargin="60px" 
leftmargin="60px" > 


14 <div id="" class=""> 

15 <p> 欢 迎 访问 我 们 的 站 点 ， 我 们 为 您 提供 网 站 地 图 。</p> 
16 网 站 导航 : 

3 <a href="http://www.baidu.com"> 百 度 </a> 
18 <a href="http://www.163.com"> 网 易 </a> 

19 <a href="http://www.sina.com.cn"> 新 浪 </a> 
20 <a href="http://www.sohu.com.cn"> 搜 狐 </a> 
21 </div> 

22 </body> 

23 </html> 

3. 代码 解释 


代码 中 第 10 行 定义 div 的 背景 、 宽 度 和 高 度 ; 第 13 行 设置 body 属性 ， 其 中 设置 网 页 
信息 显示 的 颜色 为 黑色 ， 背 景色 为 #f0f0f0， 链 接 的 颜色 为 绿色 ， 活 动 链接 为 白色 ,访问 过 
链接 为 红色 ， 网 页 中 的 文档 左边 距 、 上 边 距 均 为 60px; 第 15 行 插入 1 个 段落 ; 第 17 一 20 
行 插 入 4 个 超 链接 。 


一 一 
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图 2-4 主体 body 标记 属性 的 应 用 


2.4 HTML 基本 语法 


HTML 文档 结构 主要 由 若干 标记 构成 ， 随 着 页 面 复杂 程度 的 不 同 ， 所 使 用 的 标记 数量 
和 标记 属性 设置 也 不 相同 。 掌握 HTML 标记 语法 和 标记 属性 语法 是 设计 Web 页 面 的 基础 。 


2.4.1 标记 类 型 


HTML 标记 是 由 尖 括 号 包围 的 关键 词 ， 用 于 说 明 指定 内 容 的 外 貌 和 特征 ， 也 可 称 为 标 
签 (Tag)， 本 书 统一 约定 为 标记 。<html></html>、<head></head>、<body></body>、<br>、 
<hr> 等 都 是 标记 。 标 记 类 型 通常 分 为 单 〈 个 ) 标记 和 双 (成 对 ) 标记 两 种 类 型 。 

1. 单 (个 ) 标记 

仅 使 用 单个 标记 就 能 够 表达 特定 的 意思 ， 称 为 单 ( 个 ) 标记 。W3C 定义 的 新 标准 
(XHTML1.0/HTML4.01》 建 议 单个 标记 应 以 “/” 结 尾 ， 即 < 标记 名 称 />。 

1) 基本 语法 


< 标记 名 称 > 或 < 标记 名 称 /> 

2) 语法 说 明 

最 常用 的 单个 标记 有 <br>、<hr>、<link>。<br>、<br 放 表示 换行 ，<hr>、<hr 人 > 表示 水 
平分 隔 线 ，<link> 表 示 链 接 标 记 。 

2. 双 (成 对 ) 标记 

HTML 标记 通常 是 成 对 出 现 的 ， 比 如 <b> 和 </b>。 标 记 对 中 的 第 一 个 标记 是 开始 标记 
(也 称 为 首 标记 )， 第 二 个 标记 是 结束 标记 (也 称 为 尾 标 记 )。 

1) 基本 语法 

< 标记 名 称 > 内 容 </ 标 记名 称 > 

2) 语法 说 明 

内 容 : 是 被 成 对 标记 说 明 特 定 外 貌 的 部 分 。 

例如 ，<html> 与 </html> 之 间 的 文本 描述 网 页 。<body> 与 </body> 之 间 的 文本 是 可 见 的 
页 面 内 容 。<strong> 表 示 重 要 文本 </strong> 标 记 让 浏览 器 将 内 容 “ 表 示 重 要 文本 ”以 标准 粗 
体 方式 显示 。 
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标记 可 以 相互 嵌 套 ， 但 是 不 能 交叉 。 尽 管 浏览 器 能 够 理解 ， 但 不 是 好 的 编程 习惯 。 

例如 ， 将 h3 标记 与 i 标 记 交 叉 了 ， 错 误 代 码 如 下 所 示 : 

<h3><i> 这 是 错误 的 交叉 嵌 套 的 代码 </h3></i> <!-- 交叉 嵌 套 错误 --> 

正确 代码 如 下 所 示 : 

<h3><i> 这 是 正确 典 套 不 交叉 的 代码 </i></h3> 
2.4.2 HTML 属性 

HTML 使 用 标记 来 描述 网 页 ， 浏 览 器 根据 标记 解释 标记 所 包含 内 容 的 效果 。 每 一 个 标 
记 均 定义 了 一 个 默认 的 显示 效果 ， 这 些 默认 效果 是 通过 标记 的 附加 信息 〈 也 称 为 属性 
Attribute) 来 定义 的 。 如 果 要 修改 某 一 个 效果 ， 那 就 需要 修改 该 标记 附加 信息 。 

例如 ， 段 落 p 标记 默认 内 容 是 居 左 对 齐 ， 如 果 需 要 将 段落 居中 对 齐 显示 ， 只 需要 设置 
对 齐 align 属性 。 代 码 如 下 所 示 : 

<p align="center"> 这 个 段落 居中 显示 </p> 

1. 基本 语法 

< 标记 名 称 属性 名 1=" 属 性 值 1"” 属 性 名 2=" 属 性 值 2”... 属性 名 n=" 属 性 值 n"></ 标 记名 称 > 

2. 语法 说 明 

属性 应 在 开始 标记 ( 首 标 记 〉 内 定义 ， 且 与 首 标记 名 称 之 间 至 少 留 有 一 个 空格 。 例 如 ， 
在 上 例 的 p 标记 中 ，align 为 属性 ，center 为 属性 值 ， 属 性 与 属性 值 之 间 通 过 赋值 号 “=” 
连接 ， 属 性 值 可 以 直接 书写 ， 也 可 以 使 用 双 引 号 〈”") 括 起 来 。 多 个 属性 / 值 对 之 间 至 少 留 
一 个 空格 。 


作为 Web 前 端 开 发 工程 师 应 该 养 成 一 个 良好 的 编写 属性 / 值 对 的 习惯 ， 建 议 统一 为 属 
性 值 加 上 双 引 号 ， 即 ; 


属性 名 n=" 属 性 值 n" 
下 列 写 法 也 是 正确 的 : 
<p align=center> 这 个 段落 居中 显示 </p> 


【 例 2-4-1】 标 记 语法 及 属性 语法 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 2-5 所 示 。 


全 过 n> 国 洲 | 





2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
5 <meta charset="UTF-8"> : 
6 ”<title> 标 记 语法 及 属性 语法 应 用 </title> 0 
7 <style type="text/css"> 
8 h2{text-align:center;background:#6699ff;padding:20px;} 
9 p{text-indent:2em;} 
10 </style> 
11 </head> 
12 <body background="" text="red"> 


13 <h2 align="center"> 新 &nbsp; 年 snbsp; 寄 snbsp; 语 </h2> 

14 <hr size="2" color="#6600ff" width="100%"/> 

15 <p align="left"> 轻 轻 送 上 我 忠诚 的 祈求 和 祝愿 ， 祈 求 分 别 的 时 光 像 流水 瞬间 逝去 ， 
祝愿 再 会 时 ， 紧 握 的 手中 滋 满 友情 和 青春 的 力量 。 </p> 

16 <p align="right"> 有 一 种 跌倒 叫 站 起 ， 有 一 种 失落 叫 收获 ， 有 一 种 失败 叫 成 功 一 坚 
强 些 ， 朋 友 ， 明 天 将 属于 你 ! </p> 

17 </body> 

18 </html> 


3. 代码 解释 

代码 中 第 8 一 9 行 分 别 定义 标题 字 h2 样式 对齐、 背景 和 填充 等 属性 )、p 样式 〈 首 行 
缩 进 2 个 字符 ) 第 12 一 17 行 是 HTML 的 主体 ， 包 含 标题 字 、 水 平分 隔 线 、 段 落 等 标记 定 
义 ， 其 中 第 12 行 定 义 主体 body 的 所 有 文本 信息 的 颜色 属性 ， 第 13 行 定义 标题 字 h2 对 
齐 align 属性 〈 居 中 对 齐 )， 第 14 行 定 义 水 平分 隔 线 hr 的 粗细 、 颜 色 、 宽 度 等 属性 ， 第 
15 行 定义 段落 p 的 对 齐 align 属性 〈 左 对 齐 )， 第 16 行 定 义 段落 p 的 对 齐 align 属性 〈 右 
对 齐 )。 





上 我 电 诚 的 术 求 和 祝愿， 祈求 分 别 的 时 光 像 流 水 瞬间 着 去 ， 祝 原理 会 时 ， 坚 握 的 手中 淄 满 友情 和 





有 一 神 跌 例 岂 站 起 ， 有 一 种 失落 叫 改 著 ， 有 一 种 失败 叫 所 功 一 华强 些 ， 朋 友 ， 明 天 将 属于 你 ! 





图 2-5 标记 语法 及 属性 语法 应 用 
2.5 注 释 


为 了 提高 代码 的 可 读 性 、 可 维护 性 ， 作 为 Web 前 端 开发 工程 师 必须 养 成 良好 的 编程 习 
惯 。 通 过 注释 标记 给 脚本 代码 或 样式 定义 增加 注释 文本 信息 ， 可 以 给 Web 编程 人 员 阅 读 和 
理解 代码 提供 帮助 ， 对 后 期 软件 维护 和 升级 葛 定 基础 。 使 用 锯齿 格式 编写 代码 ， 即 代码 向 
右 缩 进 4 个 字符 ， 也 可 自 定义 缩 进 量 。 

在 HIML 代码 中 插入 注释 标记 可 以 提高 代码 的 可 读 性 。 浏 览 器 不 会 解释 注释 标记 , 注 
释 标记 的 内 容 也 不 会 显示 在 页 面 上 。 

HTML 代码 中 添加 注释 的 方法 有 两 种 : 

<!-- 注释 信息 -->。 

<comment> 注 释 信 息 </comment>。 

1. <!-- 注释 信息 --> 

1) 基本 语法 

<!-- 显示 一 个 段落 --> 

2) 语法 说 明 

以 左 尖 括号 和 感叹 号 组 合 开始 (<!--)， 以 右 尖 括号 (-->) 结束 。 
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2. 注释 comment 标记 

1) 基本 语法 

<comment> 显 示 一 个 段落 </comment> 

2) 语法 说 明 

comment 标记 是 成 对 标记 ， 以 <commenf> 开 始 ， 以 </comment> 结 束 。 标 记 包围 的 信息 


为 注释 内 容 。 但 这 种 方式 很 多 浏览 器 〈Chrome 等 ) 会 显示 在 页 面 上 ， 所 以 个 建设 采用 。 
【 例 2-5-1】 拖网 区 加 让 征 。 代码 如 下 所 示 ， | 2-6 所 示 。 | 























图 2-6 添加 注释 应 用 


1 = edu 2 5 1htnl = 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 注释 应 用 </title> 
</head> 
8 <body> 
9 <comment> 显 示 一 个 段落 </comment> 
10 <p> 这 是 一 个 段落 </p> 
1 <script type="text/javascript"> 
12 document .write ("HTML 注 释 的 应 用 ") ; 
13 </script> 
14 </body> 
15 </html> 
代码 解释 


代码 中 第 1 行 采用 第 1 种 注释 方式 ; 第 9 行 采用 第 2 种 注释 方式 (下 不 会 显示 在 页 面 
上 ); 第 11 一 13 行 是 在 body 标记 中 插入 脚本 标记 ， 第 12 行 是 向 页 面 输出 信息 。 


2.6 HTML 文档 编写 规范 


HTML 文档 是 Web 网 页 的 重要 文本 文件 ， 也 是 Web 前 端 开发 工程 师 设计 网 站 的 重要 
信息 载体 。 文 档 编写 质量 直接 影响 网 站 呈现 形式 、 访 问 速度 、 网 络 流量 和 用 户 体验 ， 所 以 
遵循 HTML 文档 编写 规范 十 分 重要 。 


2.6.1 HTML 代码 书写 规范 
HTML 语法 是 Web 页 面 设计 所 应 遵循 的 基本 规范 , 养 成 按 规范 编写 代码 的 习惯 , 能 够 
大 大 减少 设计 页 面 中 存在 的 缺陷 。 下 面 是 HTML 页 面 编码 时 需要 注意 的 基本 规范 : 


(1) HTML 标记 是 由 尖 括 号 包围 的 关键 词 。 所 有 标记 均 以 “<” 开 始 、 以 “>” 结 束 。 
结束 的 标记 在 开始 标记 名 称 前 加 上 和 斜 杠 “/” 例如 头 部 标记 格式 如 下 所 示 : 


<head> . </head> 


(2) 根据 标记 类 型 ， 正 确 书写 标记 ， 单 个 标记 最 好 在 右 尖 括 号 前 加 1 个 斜 杠 “/” 如 
换行 标记 是 单个 标记 <br>， 成 对 标记 最 好 同时 输入 开始 标记 和 结束 标记 ， 以 免 忘 记 。 
(3) 标记 可 以 相互 嵌 套 〈 也 称 为 包含 )， 但 不 能 交叉 。 如 : 


<head><title> .… </title> </head> <!-- 这 是 正确 的 书写 格式 --> 
<head><style> .</head></style> <!-- 这 是 错误 的 书写 格式 --> 


(4) 在 HTML 代码 书写 时 不 区 分 大 小 写 , 如 头 部 标记 写成 <HEAD>、<head>、<Head>、 
<HEAd> 都 可 以 ， 但 建议 在 同一 个 Web 开发 项 目 保持 一 种 风格 ， 如 统一 小 写 标记 名 称 。 

(5) 代码 中 包含 任意 多 的 回 车 符 和 空格 在 HTML 页 面 显示 时 均 不 起 作用 。 需 要 时 可 使 
用 <br/> 和 &nbsp; 来 实现 换行 和 插入 空格 。 为 了 代码 清晰 ， 建 议 不 同 的 标记 都 单独 占 一 行 。 

(6) 给 标记 设置 属性 时 ， 属 性 值 建议 用 双 引 号 标注 起 来 。 如 段落 内 容 居 中 格式 如 下 
所 示 : 

<p align="center"> 这 是 段落 信息 居中 显示 </p> 


(7) 书写 开始 与 结束 标记 时 ， 在 左 尖 括号 与 标记 名 或 与 斜 杠 “/” 之 间 不 能 留 有 多 余 空 
格 ， 否 则 浏览 器 不 能 识别 该 标记 ， 导 致 错误 标记 直接 显示 在 页 面 上 ， 影 响 页 面 美观 效果 。 
例如 将 【 例 2-5-1】 中 第 9 行 改 成 如 下 格式 ， 错 误 的 标记 被 显示 在 页 面 上 ， 如 图 2-7 所 示 。 


< comment> 显 示 一 个 段落 < /comment> 














< comment> 显 示 一 个 段落 </comment> 


这 是 一 个 段落 
HTML 注 释 的 应 用 





2-7 添加 注释 应 用 


(8) 编写 HIML 代码 时 ， 应 该 使 用 锯齿 结构 ， 即 向 右 缩 进 2 一 4 个 字符 ， 使 代码 结构 
清晰 ， 提 高 代码 的 可 读 性 ， 为 后 期 阅读 和 维护 提供 帮助 。 


2.6.2 HTML 文档 命名 规则 


HTML 文档 是 展示 Web 前 端 开发 工程 师 成 果 的 最 好 表示 方式 , 为 了 便于 文档 规范 化 管 
理 ， 在 编写 HTML 文档 时 ， 必 须 遵循 HTML 文件 命名 规则 。 

HTML 文档 命名 规则 如 下 : 

(1) 文档 的 扩展 名 为 htm 或 者 html， 建 议 统一 用 html。 

(2) 文档 名 称 只 可 由 英文 字母 、 数 字 或 下 画 线 组 成 ， 建 议 以 字母 或 下 画 线 开始 。 

(3) 文档 名 称 中 不 能 包含 特殊 符号 ， 如 空格 、$、& 等 。 

(4) 文档 名 称 区 分 大 小 写 ， 特 别 在 UNIX、Linux 系统 中 大 小 写 表示 的 文件 是 不 同 的 。 

(5) Web 服务 器 主页 一 般 命名 为 index.html 或 defaulthtml。 
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2.7 HTML 文档 类 型 


Web 世界 中 存在 许多 不 同 的 文档 。 只 有 了 解 文档 的 类 型 , 浏览 器 才能 正确 地 显示 文档 。 
HTML 也 有 多 个 不 同 的 版 本 ,只 有 完全 明白 页 面 中 使 用 的 确切 HIML 版 本 , 浏览 器 才能 完 
全 正确 地 显示 出 HIML 页 面 。 


2.7.1 <!DOCTYPE> 标 记 


DOCTYPE 是 Document Type 的 英文 缩写 ，<!IDOCTYPE> 标 记 不 是 HIML 标记 。 此 标 
记 可 告知 浏览 器 文档 使 用 哪 种 HTML 或 XHTML 规范 。<!IDOCTYPE> 声 明 位 于 文档 中 的 最 
前 面 的 位 置 ， 处 于 <html> 标 记 之 前 。 
基本 语法 
<!DOCTYPE element-name DTD-type DTD-name DTD-ur1> 
语法 说 明 
<!IDOCTYPE> 表 示 开 始 声明 文档 类 型 定义 (Document Type Definition，DTD)， 其 中 
DOCTYPE 是 关键 字 。 
element-name 指定 该 DTD 的 根 元 素 名 称 。 
DTD-type 指定 该 DTD 类 型 。 设置 为 PUBLIC， 则 表示 该 DTD 是 标准 公用 的 ， 设 置 为 
SYSTEM， 则 表示 私人 制定 的 。 
DTD-name 指定 该 DTD 的 文件 名 称 。 
DTD-url 指定 该 DTD 文件 所 在 的 URL 地 址 。 
> 是 指 结束 DTD 的 声明 。 


2.7.2 DTD 类 型 


1， HTMIL4.01 的 DTD 定义 XHTML1.0 的 DTD 定义 与 此 类 似 ， 省 略 ) 

HTML4.01 中 规定 了 三 种 DTD 类 型 : 严格 型 〈Strict)、 过 渡 型 〈Transitional) 以 及 框 
架 型 (Frameset) 。 

1) HTML Strict DTD 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/htm14/strict.dtd"> 


2) HTML Transitional DID 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html14/1oose.dtd"> 


3) HIML Frameset DID 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.o0rg/TR/html4/frameset.dtd"> 


2，HTMLS 的 DTD 定义 


<!doctype html> 


HTML 文档 中 规定 doctype 是 非常 重要 的 ， 这 样 浏 览 器 就 能 了 解 预期 的 文档 类 型 。 
HIML4.01 中 的 doctype 需要 对 DTD 进行 引用 ， 因 为 HIML4.01 基于 SGML。 而 HTML5 
不 基于 SGML， 因 此 不 需要 对 DTD 进行 引用 ， 但 是 需要 doctype 来 规范 浏览 器 的 行为 。 


2.8 综合 实例 


以 欢度 元 旦 为 主题 , 参照 给 定 的 HTML 代码 和 图 片 资源 , 分 别 利用 EditPlus、HBuilder 


等 软件 设计 Web 网 页 ， 效 果 如 图 2-8 所 示 。 
1 <== Gda 2 和 .ntnl ==> 
2 <!doctype html> 
3 <html lang="en"> 

<head> 


WNPOLOJIAUMD 








<meta charset="UTF-8"> 

<title> 标 记 语法 及 属性 语法 应 用 </title> 

<style type="text/css"> 
div{text-align:center;/* 文本 居中 对 齐 */} 

</style> 


</head> 
<body bgcolor="#CDEBE6"> 





<h3 align="center"> 欢 度 新 年 元 旦 </h3> 
<hr size="2" color="red" width="100%"/> 
<p align="left">gnbsp; gnbsp; gnbsp; gnbsp; 元 BB (New Year's Day, New 
Year ) ， 指 一 年 开始 的 第 一 天 ， 也 被 称 为 "新 历年 "、" 阳 历年 "， 在 古代 指 阴历 的 正 
月 初 一 。1949 年 9 月 27 日 ， 中 国人 民政 治 协 商会 议 第 一 届 全 体会 议 正式 确立 公历 1 月 1 
日 为 元 旦 。 元 旦 是 世界 上 很 多 国家 或 地 区 的 法 定 假日 。</p> 
<div id="" class=""> 

<img src="yundanl.jpg" width="300" height="165" > 

<img src="yundan2.jpg" width="300" height="165" > 
</div> 
<hr size="2" color="red" width="100%"/> 
<p align="center">Web 前 端 开发 技术 工作 室 Copyright &copy;2017-2020 
</p> 


</body> 


22 </html> 


上 述 代码 中 第 4 一 10 行 是 HIML 的 头 部 ， 包 含 元 信息 、 标 题 和 样式 的 定义 ; 第 11 一 
21 行 是 HTML 的 主体 ， 包 含 标题 字 、 水 平分 隔 线 、 段 落 、 图 层 、 图 像 标 记 定义 ， 其 中 第 





pe 
D Sernmneran x 有 -ww 
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a New Year ) ,其 一 年 开 她 的 第 一 天 ， 也 梳 浆 为 ,在 古代 梢 阴历 的 正月 要 一 ，1949 年 9 月 27 
,中 国人 民 下 治 协商 会 议 第 一 般 人 体会 议 正 式 确立 公历 1 月 1 日 为 元 日。 Er 
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图 2-8 综合 实例 应 用 
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11 行 定义 主体 body 的 背景 颜色 属性 ， 第 12 行 定义 标题 字 h3 对 齐 align 属性 〈 居 中 对 齐 )， 
第 13 行 、 第 19 行 定 义 水 平分 隔 线 hr 的 粗细 、 颜 色 、 宽 度 等 属性 ， 第 14 行 定义 段落 p 的 
对 齐 align 属性 〈 左 对 齐 )， 第 15 一 18 行 定义 图 层 ， 图 层 内 插入 2 个 图 像 img 标记 ， 分 别 
定义 图 像 的 宽度 、 高 度 、 图 片 文 件 的 URL 等 属性 ， 第 20 行 定 义 段落 ， 说 明 版 权 信息 。 


本 章 小 结 


本 章 主要 介绍 了 HITML 文件 的 基本 结构 。 HTML 文档 主要 包含 <html></html>、<head> 
</head>、<body></body> 三 个 标记 。 

<body></body> 之 间 的 内 容 是 HTML 文档 的 主体 部 分 ， 会 显示 在 页 面 上 。body 标记 的 
常用 属性 有 text、bgcolor、background、link、vlink、alink、topmargin、leftmargin 等 。 在 
head 标记 中 重点 介绍 了 标题 title 和 meta 元 信息 标记 ， 其 中 meta 标记 有 两 种 属性 ， 分 别 是 
name、http-equiv， 都 是 “属性 / 值 ” 对 中 的 属性 ， 其 值 由 属性 content 给 定 。 

同时 介绍 了 HTML 标记 语法 和 HIML 属性 语法 。HTML 标记 分 为 单个 标记 和 成 对 标 
记 。 成 对 标记 由 开始 标记 和 结束 标记 组 成 。 标 记 属性 必须 在 开始 标记 中 定义 ， 多 个 “属性 / 
值 ”对 之 间 至 少 空 1 个 空格 ， 首 个 属性 与 开始 标记 之 间 至 少 空 1 个 空格 。 

HIML4.01 和 XHTML1.0 文档 类 型 有 三 种 : 严格 型 (Strict)、 过 渡 型 〈Transitional)、 
框架 型 (Frameset)。HTMLS5 文档 类 型 改 成 简洁 型 <!doctype html>。 





练习 与 实验 
练习 2 

1. 选择 题 
(1) 下 列 标记 用 于 设置 页 面 标 题 的 标记 是 )。 

(A) <caption> (B) <title> (C) <html> (D) <head> 
(2) 下 列 标记 中 能 够 显示 网 页 内 容 的 标记 是 〈 7) 

(A) <title> (B) <br> (C) <html> (D) <body> 
(3) 正确 表达 页 面 注释 格式 的 是 〈 ha 

(A) <!-- 注 释 --> (B) <-- 注释 --> 

(C) <! 注释 > (D) <! comment> 
(4) 以 下 属性 中 不 是 meta 元 信息 标记 的 属性 是 ( )。 

(A) name (B) color (C) content (D) http-equiv 
(5) 设置 body 显示 信息 颜色 为 红色 的 属性 是 和 

(A) text (B) color (C) bgcolor (D) background 
(6) 以 下 标记 不 是 成 对 标记 的 是 )。 

(A) <html> (B) <br> (C) <body> (D) <head> 
2. 填空 题 


(1) HTML 文档 通常 以 或 作为 后 级 名 ， 网 站 的 首页 文件 通常 命名 为 


或 5 

(2) HTML 文档 是 用 来 描述 网 页 的 ， 一 般 是 由 和 两 部 分 组 成 。 

(3) HTML 中 标记 分 标记 和 标记 两 种 。 部 分 标记 是 单个 标记 ， 大 多 数 标 
记 是 标记 由 标记 (或 标记 ) 和 标记 (或 标记 ) 组 成 。 

(4) HTML4.01 或 XHTML1.0 的 文档 类 型 有 三 种 ， 分 别 是 s 
HTMLS5 中 文档 类 型 定义 使 用 标记 正确 的 写法 是 

3. 简 答题 

(1) 简 述 一 个 HTML 文档 包 应 含 几 个 基本 标记 。 并 举例 说 明 。 

(2) 写 出 HITML 文件 命名 规则 。 


实验 2 


1. 分 别 使 用 EditPlus 或 HBuilder 等 软件 编写 符合 以 下 要 求 的 文档 : 标题 为 “求知 家 
园 ”， 在 浏览 器 窗口 中 显示 “欢迎 来 到 我 们 的 求知 家 园 ” 完成 后 的 效果 如 图 2-9 所 示 。 其 
中 网 页 信息 颜色 为 blue、 背 景 颜色 为 #99ffff， 水 平分 隔 线 粗细 为 5、 颜色 为 HF3333。 

2. 使 用 EditPlus 软件 编写 符合 以 下 要 求 的 文档 : 标题 为 “Google 搜索 ”， 在 浏览 器 窗 
口中 显示 “欢迎 使 用 Google 搜索 !” 和 Google 图 片 ， 完 成 后 的 效果 如 图 2-10 所 示 。 其 中 
网 页 背景 颜色 为 #tfftf33， 水 平分 隔 线 粗细 为 5、 颜 色 为 # 0033ff; 图 片 名 称 为 “google png”。 

网 页 中 插入 图 片 的 方法 格式 如 下 : 


<img src="google.png" width="275" height="95" border="0" alt=""> 
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2-9 ”求知 家 园 页 面 2-10 Google 搜索 页 面 
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本 章 学 习 目标 


网 页 内 容 排版 包括 文本 格式 化 、 段 落 格式 化 和 整个 页 面 的 排版 格式 化 ， 这 是 设计 一 个 
网 页 的 基础 。 文 本 格式 化 标记 分 为 字体 标记 、 文 字 修饰 标记 。 字 体 标记 和 文字 修饰 标记 包 
括 对 于 字体 样式 的 一 些 特殊 修改 。 段 落 格式 分 为 段落 标记 、 换 行 标记 、 水 平分 隔 线 标记 等 。 

通过 文本 与 段落 格式 化 知识 的 学 习 , 能 够 掌握 页 面 内 容 的 初步 设计 ,理解 并 掌握 HTML 
标题 字 标 记 、 空 格 及 特殊 符号 的 使 用 。 理 解 格式 化 标记 中 的 文本 修饰 标记 、 计 算 机 输出 标 
记 、 引 用 和 术语 标记 的 语法 及 字体 font 标记 语法 及 使 用 ; 理解 段落 与 排版 标记 的 语法 ， 学 
会 编写 简易 的 Web 页 面 代码 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 

。 掌握 标题 字 (hl ~ h6 ) 标记 语法 及 属性 语法 。 

。 理解 文本 格式 化 标记 类 型 与 作用 ， 并 学 会 使 用 各 种 样式 。 

。 学 会 使 用 字体 font 标记 。 

。 学 会 使 用 段落 与 排版 标记 。 

。 学 会 使 用 各 类 格式 化 标记 设计 简易 的 Web 页 面 。 


3.1 Web 页面 初步 设计 


Web 页 面 设计 需要 遵循 简洁 、 一 致 性 、 有 好 的 对 比 度 的 设计 原则 。 简 洁 是 指 以 满足 人 
们 的 实际 需求 为 目标 ， 要 求 简练 ， 准 确 。 一 致 性 是 指 网 站 中 各 个 页 面 使 用 相同 的 页 边 距 ， 
页 面 中 的 每 个 元 素 与 整个 页 面 以 及 站 点 的 色彩 和 风格 保持 一 致 。 对 比 度 的 目的 在 于 强调 突 
出 关键 内 容 ， 以 吸引 浏览 者 ， 鼓 励 他 们 去 发 掘 更 深层 次 的 内 容 。 

3.1.1 向 Web 页 面 添加 文字 信息 


在 HIML 文件 中 , 主体 内 容 被 包含 在 <body></body> 标 记 之 间 ， 同 时 body 标记 也 有 很 
多 自身 的 属性 ， 例 如 设置 页 面 背景 、 设 置 页 面 边界 等 。 

1. 基本 语法 

<body> 向 这 里 添加 内 容 </body> 

2. 语法 说 明 

body 标记 定义 文档 的 主体 。 


body 标记 包含 文档 的 所 有 内 容 〈 例 如 文本 、 超 链接 、 图 像 、 表 格 和 列表 等 )。 
一 个 简单 的 HTML 文档 必须 包含 最 基本 的 必 备 的 标记 。 be 
【 例 3-1-1)】 文档 内 容 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-1 所 示 。 


1 <!--edu 3 1 1.html--> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 简 易 网 页 </title> 
光 </head> 
8 <body> 
9 文档 的 内 容 ... ... 

10 </body> 

11 </html> 

3， 代码 解 释 


代码 中 第 4 一 7 行 是 HTML 的 头 部 ， 包 含 页 面 标题 ; 第 8 一 10 行 是 HTML 的 主体 ， 第 
9 行 是 向 主体 中 添加 的 文字 信息 。 ) 


3.1.2 ”标题 字 标 记 > C [Omer/We |@ 


标题 字 标 记 由 hl 一 h6 共 六 种 标记 组 成 。 标 记 中 的 字母 h - 
是 英语 Heading 简称 。 作 为 标题 字 , hl 标记 定义 最 大 的 标题 字 ， 图 3-1 添加 文档 内 容 
h6 标记 定义 最 小 的 标题 字 。hl 标记 到 h6 标记 属于 块 级 标记 ,它们 必须 在 HTML 中 首尾 成 
对 出 现 。 浏 览 器 会 自动 地 在 标题 的 前 后 添加 空 行 。 

1. 基本 语法 

<hl align="leftlcenter1right1justify">1 号 标题 文字 </h1> 

<h2 align="leftlcenter1right1justify">2 号 标题 文字 </h2> 

<h3 align="leftlcenter1right1justify">3 号 标题 文字 </h3> 

<h4 align="leftlcenter1right1justify">4 号 标题 文字 </h4> 


<h5 align="leftlcenter1right1justify">5 号 标题 文字 </h5> 
<h6 align="leftlcenter1right1justify">6 号 标题 文字 </h6> 


2. 语法 说 明 

h 后 面 的 数字 越 小 标题 字 越 大 。 标 题字 标记 的 align 属性 用 来 定义 标题 字 的 对 齐 方式 ， 
对 齐 方式 有 四 种 ， 分 别 是 left、center、right、justify。 但 是 一 般 推 荐 设计 者 使 用 CSS 
表 来 定义 对 齐 方式 。 

【 例 3-1-2】 标 题字 标记 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-2 所 示 。 


文档 的 内 容 .….… 








1 <!-- edu 3 1 2.html --> > 

2 <!doctype html> 视频 讲解 
3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 标题 字 应 用 </title> 

7 </head> 

8 <body> 

9 <hl align="center" >Web 前 端 开发 技术 </h1> 
0 


于 <h2 align="left" >Web 前 端 开发 技术 </h2> 


地 w 汕 
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1 <h3 align="center" >Web 前 端 开发 技术 </h3> 
22 <h4 align="right" >Web 前 端 开发 技术 </h4> 
13 <h5 align="justify" >Web 前 端 开发 技术 </h5> 
14 <h6 align="center"” >Web 前 端 开发 技术 </h6> 
15 </body> 
16 </html> 

rr 

Web 前 端 开发 技术 
Web 前 端 开发 技术 
Web 吉 六 开发 技术 
wa 有 本 开本 
as 





图 3-2 标题 字 应 用 





3. 代码 解释 

代码 中 第 9 行 定义 hl 标题 字 居 中 显示 ; 第 10 行 定义 h2 标题 字 左 对 齐 ， 其 余 代码 相似 。 

标题 文字 的 大 小 由 它们 的 重要 性 决定 ， 等 级 越 高 的 标题 字号 越 大 。 在 设计 时 要 对 各 级 
标题 有 所 规划 。 


3.1.3 添加 空格 与 特殊 符号 


在 HTML 文件 中 , 添加 空格 的 方式 与 其 他 文档 添加 空格 的 方式 不 同 ,网 页 中 通过 代码 
控制 来 添加 空格 ， 而 在 其 他 编辑 器 中 通过 键盘 空格 键 来 输入 空格 。 

1. 基本 语法 

<body> 

&nbsp; &lt; &reg; &times; 

</body> 

2. 语法 说 明 

在 网 页 中 添加 空格 使 用 “&nbsp;”， 其 中 “nbsp” 是 指 Non Breaking Space， 空 格 数量 
与 “&nbsp;” 个 数 相同 。 

在 网 页 中 插入 特殊 字符 与 插入 空格 符号 的 方式 相同 。 特 殊 符 号 如 表 3-1 所 示 。 


表 3-1 特殊 字符 对 应 的 代码 





























显示 结果 说 明 符号 代码 

显示 一 个 空格 &nbsp; 
小 于 &lt; 

入 大 Ret: 

& 信 符 号 人 amp: 

红 双 引 号 &quot: 

© 版 权 &copy. 

® 注册 商标 &reg; 

x 乘 号 &times: 

室 除 号 Rdivide; 








在 HTML 文件 中 特殊 字符 对 应 的 代码 ， 浏 览 器 解释 后 会 显示 对 应 的 特殊 符号 。 
【 例 3-1-3】 插 入 特殊 符号 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-3 所 示 。 


1 <!-- edu 3 1 3.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 插 入 特殊 符号 </title> 

7 </head> 

8 <body> 

9 &nbsp; gnbsp; gnbsp; gnbsp; 新 浪 科 技 讯 北京 时 间 11 月 21 日 凌晨 消息 ， 台 湾 市 场 
研究 机 构 Digitimes Research 周 二 发 布 报告 称 ， 预 计 2013 年 全 球 平板 电脑 销售 量 
将 会 达到 2 .1 亿 台 ， 超 过 笔记 本 的 年 度 销售 量 。<br> 

10 <hr color="blue"> 

11 <p align="center"> 版 权 所 有 &copy; 新 浪 公司 </p> 

12 </body> 

13 </html> 

3. 代码 解释 


代码 中 第 9 行 开始 插入 4 个 空格 ， 用 于 实现 首 行 缩 进 2 个 字符 ， 行 末 插入 <br> 换 行 ， 
第 10 行 插入 蓝 色 的 水 平分 隔 线 ， 第 11 行 插入 版 权 特 殊 符号 “&copy;”。 

















E ms 
EEC 到 | DORA ht os 
新 浪 科 技 讯 北京 时 间 11 月 21 日 读 朋 消息 ， 各 湾 市 场 研究 机 构 Digitines Research 必 二 发 布 报告 
称 ， 预 计 2013 年 全 于 干 板 电 脑 铺 售 重 将 会 达到 2. 1 亿 台 ， 赵 过 笔记 二 的 年 度 梢 售 重 、 | 视频 讲解 
版 权 所 有 co 新浪 公 司 





图 3-3 空格 与 特殊 符号 的 应 用 


3.2 格式 化 文本 标记 


HTML 中 提供 了 很 多 格式 化 文本 的 标记 ， 如 文字 加 粗 、 斜 体 、 下 画 线 、 底 纹 、 上 下 标 等 。 
3.2.1 文本 修饰 标记 


文本 修饰 标记 各 类 浏览 器 均 支持 ， 各 类 网 页 开发 工具 中 仍然 有 这 类 标记 。 常 见 的 文本 
修饰 标记 如 表 3-2 所 示 。 
表 3-2 常见 的 文本 修饰 标记 
























标 记 说 明 

<b> 软 件 工程 专业 ! </b> 定义 粗 体 

<i> 软 件 工程 专业 ! </i> 定义 斜体 

<u> 软 件 工程 专业 ! </u> 定义 下 画 线 

<del> 软 件 工程 专业 ! </del> 定义 删除 线 

<sup> 软 件 工 程 专业 ! </sup> 定义 上 标 

<sub> 软 件 工程 专业 ! </sub> 定义 下 标 

<strong> 软 件 工程 专业 ! </strong> 定义 着 重文 字 ， 与 <b></b> 效 果 相同 
<em> 软 件 工程 专业 ! </em> 定义 加 重 语气 ， 与 <i></ 这 效果 相同 
<small> 软 件 工程 专业 ! </small> 变 小 字号 





<big> 软 件 工程 专业 ! </big> 变 大 字号 


十 汕 
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在 EditPlus V4.0 和 Adobe Dreamweaver CS6 以 上 版 本 中 ， 已 经 使 上 
表示 强调 的 文本 ， 替 代 <i></> 和 斜体 标记 ; 使 月 
代 <b></b> 粗 体 标记 。 但 <b></b> 标 记 和 <i></ 记 标记 也 还 在 使 用 。 


3.2.2 计算 机 输出 标记 





常用 的 计算 机 输出 标记 如 表 3-3 所 示 。 


表 3-3 常用 的 计算 机 输出 标记 














<em></em> 标 记 来 


日 <strong></strong> 标 记 来 表示 重要 文本 ， 蔡 


























标 记 说 明 
<code></code> 定义 计算 机 代码 
<kbd></kbd> 定义 键盘 码 
<samp></samp> 定义 计算 机 代码 样本 
<tt></tt> 定义 打字 机 代码 
<var></var> 定义 变量 
<pre></pre> 定义 预 格式 文本 

3.2.3 引用 和 术语 标记 
常用 的 引用 和 术语 标记 如 表 3-4 所 示 。 
表 3-4 常用 的 引用 和 术语 标记 

标 记 主要 用 途 

<abbr>etc.</abbr> 定义 缩写 
<address> 江 苏 南京 市 </address> 定义 地 址 


<blockquote> 长 的 引用 </blockquote> 


<cite> 引 用 、 引 证 </cite> 
<q> 引 用 短语 </q> 
<dfn> 定 义 项 目 </dfn> 


定义 引用 、 


定义 长 的 引用 
引证 


定义 短 的 引用 语 ， 正 看 不 到 引号 ， 其 余 可 以 
定义 一 个 定义 项 目 


【 例 3-2-1】 文 本 修饰 标记 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-4 所 示 。 





[DD wb B P - © x| 全 xftstiBa 用 









文本 修饰 标记 应 用 


视频 讲解 





软件 工程 专业 全 国 就 业 最 好 ! 
Be 三 守业 国 话 业 窟 弛 ! 


XH2X+5=0 
X=2 
软件 工程 专业 全 国 和 业 最 好! 
软件 工程 专业 全 国 就 业 最 好 ! 
软件 工程 ! ”区 伴 工 得/ 














图 3-4 文本 修饰 标记 应 用 


1 = bl > 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 ”<title> 文 本 修饰 标记 应 用 </title> 

7 <style type="text/css"> 

8 *{text-align:center;/* 所 有 标记 的 内 容 居 中 显示 */} 
9 </style> 

10 </head> 

11 <body > 

12 <h3 align="center"> 文 本 修饰 标记 应 用 </h3> 

13 <hr size="2" color="red"> 

14 <comment > 修饰 标 记 应 用 </comment> 

15 <b> 软 件 工程 专业 全 国 就 业 最 好 ! </b><br> 

16 <i> 软 件 工程 专业 全 国 就 业 最 好 ! </i><br> 

17 <u> 软 件 工程 专业 全 国 就 业 最 好 ! </u><br> 

18 <del> 软 件 工程 专业 全 国 就 业 最 好 ! </del><pbr> 

19 X<sup>2</sup>+2X+5=0<br> 

20 X<sub>1</sub>=2<br> 
2 <small> 软 件 工程 专业 全 国 就 业 最 好 ! </small><br> 
22 <big> 软 件 工程 专业 全 国 就 业 最 好 ! </big><br> 





23 <strong> 软 件 工 程 ! </strong> 

24 <em> 软 件 工程 ! </em> 

25 </body> 

26 </html> 

上 述 代码 中 第 12 行 是 标题 字 标 记 的 应 用 ;第 14 行 注 释 标 记 应 用 ， 第 15 一 24 行 定义 
不 同 的 文本 修饰 标记 。 


计算 机 输出 标记 和 引用 和 术语 标记 在 3.3 节 中 另行 举例 ， 此 处 省 略 。 
3.2.4 ”字体 font 标记 


在 不 指定 任何 样式 的 情况 下 ， 正 浏览 器 会 把 字体 显示 为 3 号 、 黑 色 、 宋 体 。 因 此 设计 

网 页 时 ， 根 据 需 要 更 改 不 同 段落 的 字体 。HTML5 中 可 以 使 用 CSS 中 的 字体 属性 替代 。 
font 标记 规定 文本 的 字体 系列 、 字 体 尺 寸 、 字 体 颜色 ， 所 有 浏览 器 均 支 持 font 标记 。 
1. 基本 语法 


<font face="" size="" color="" >.</font> 


2. 属性 说 明 
font 标记 的 属性 、 值 及 其 说 明 如 表 3-5 所 示 。 


表 3-5 font 标记 的 属性 、 值 及 其 说 明 
属 性 值 说 明 
正 数字 越 大 字号 越 大 ， 负 数字 越 大 字号 越 小 “+” 表 示 字 


号 比 原来 的 字号 大 一 些 ,“- ”表示 字 号 比 原来 的 字号 小 
- 些 





size 2 ee 





b (rg,b) rgb (1%,g%,b%) 
89 58D) 8D 6096.896b%》 | 规定 文本 的 颜色 。 可 以 使 用 rgb 函数 、 十 六 进 制 数 、 颜 色 








color 坟 rggbb 或 矶 gb 英文 名 称 来 表达 
colorname 
face 属性 可 以 有 多 个 值 ,， 用 逗号 分 隔 。 字 体 使 用 方式 为 从 
face 字体 1， 字体 2，.…， 字 体 m | 左 向 右 依次 选用 。 如 果 前 面 的 字体 不 存在 , 则 使 用 后 一 个 








字体 。 若 都 不 存在 ， 则 默认 使 用 “宋体 ” 


3 
章 
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【 例 3-2-2】 网 页 字体 样式 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-5 所 示 。 




















1 <!-- edu 3 2 2.html --> 
2 <!doctype html> 中 
3 <html lang="en"> 
4 <head> 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 文 字样 式 </title> 
时 </head> 
8 <body> 
9 <strong> 文 字样 式 为 黑体 、 颜 色 #000fff、 大 小 从 -1 一 -7:</strong> 
10 <font face=" 黑 体 " size="-1" color="#000fff">-1 字 </font> 
3 <font face= size="-3" color="#000fff">-3 字 </font> 
12 <font face=" 黑 体 " size="-5" color="#000fff">-5 字 </font> 
13 <font face=" 黑 体 " size="-7" color="#000fff">-7 字 </font><br> 
14 <strong> 文 字样 式 为 宋体 、 颜 色 #ff0066、 大 小 从 1 一 7:</strong> 
15 <font face=" 宋 体 " size="2" color="#ff0066">2 字 </font> 
16 <font face=" 宋 体 " size="4" color="#ff0066">4 字 </font> 
17 <font face=" 宋 体 " size="6" color="#ff0066">6 字 </font> <br> 
18 <strong> 文 字样 式 为 隶书 、 颜 色 #ff0066、 大 小 从 +1 一 +7: </strong> 
19 <font face=" 黑 体 " size="+1" color="#ff0066">1 字 </font> 
20 <font face=" 黑 体 " size="+3" color="#ff0066">3 字 </font> 
21 <font face=" 黑 体 " size="+5" color="#ff0066">5 字 </font> 
22 体 " size="+7" color="#ff0066">7 字 </font> 
23 </body> 
24 </html> 
得- _ 
wd -oor “上 国 

文字 样式 为 黑 休 、 颜 色 #000fff、 大 小 从 -1~-7: -1 字 -3 -好 -六 

文字 样式 为 宋体 、 颜 色 w0066、 大 小 从 1~7: 二 4 字 6 字 - ey 

文字 样 为 隶书 、 卢 色 moos、 大 小 497， 地 3 字 D 子 7 子 

图 3-5 字体 标记 属性 应 用 

3. 代码 解释 


代码 中 第 10~13 行 设置 字体 为 “黑体 、 颜 色 为 #00fEE、 大 小 从 -1 一 -7” 第 15 一 17 
行 设置 字体 为 “宋体 、 颜 色 为 #ff0066、 大 小 从 1 一 7” 第 19 一 22 行 设 置 字体 为 “黑体 、 颜 
色 为 #ft0066、 大 小 为 +1 一 +7”。 


3.3 段落 与 排版 标记 


网 页 的 外 观 是 否 美观 ， 很 大 程度 上 取决 于 其 排版 。 在 页 面 中 出 现 大 段 的 文字 ， 通 常 采 
用 分 段 进行 规划 ， 对 换行 也 有 极其 严格 的 划分 。 本 节 从 段落 的 细节 设置 入 手 ， 利 用 段落 与 
排版 标记 自如 地 处 理 大 段 的 文字 。 


3.3.1 段落 Dp 标记 
在 HTML 文档 中 , 合理 使 用 段落 会 使 文字 的 显示 更 加 美观 ,表达 更 加 清晰 。 段落 p 标 








记 用 来 开始 一 个 段落 ， 它 是 一 个 块 级 标记 ， 该 标记 中 不 能 再 包含 其 他 的 任何 块 级 标记 。 
1. 基本 语法 


<p align="leftlcenter1right1justify"> 段 落 正 文 内 容 </p> 


Pp 标记 会 自动 在 其 前 后 创建 一 些 空白 .浏览 器 会 自动 添加 这 些 空间 .段落 p 标 记 的 align 
属性 有 四 个 属性 值 ， 分 别 表示 左 对 齐 、 居 中 对 齐 、 右 对 齐 、 两 端 对 齐 。 
【 例 3-3-1】 网 页 段落 样式 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-6 所 示 。 


EPE FE 











及 天 p 检 记 对 剖 方 式 





网 页 的 外 观 是 否 美 观 ， 很 大 程度 上 取决 于 其 措 新 、 





网 页 的 外 观 是 否 美 现 ， 祖 大 程度 上 取决 于 其 捕 豚 。 
网 页 的 外 观 是 否 美观 ， 很 大 程度 上 取决 于 其 排版 





图 3-6 段落 样式 应 用 


en 33. 1.htmnl 一 -> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 段 落 样式 应 用 </title> 

7 </head> 

8 <body> 

9 <h5 align="center"> 段 落 p 标 记 对 齐 方式 </h5> 

10 <hr color="blue"> 

11 <p align="left"> 网 页 的 外 观 是 否 美观 ， 很 大 程度 上 取决 于 其 排版 。</p> 
12 <p align="center"> 网 页 的 外 观 是 否 美观 ， 很 大 程度 上 取决 于 其 排版 。</p> 
13 <p align="right"> 网 页 的 外 观 是 否 美观 ， 很 大 程度 上 取决 于 其 排版 。</p> 
14 </body> 

15 </html> 

2. 代码 解释 


代码 中 第 4 一 7 行 是 HTML 的 头 部 ， 包 含 页 面 标题 ; 第 8 一 14 行 是 HTML 的 主体 ， 包 
含 多 种 段落 样式 ， 其 中 第 11 行为 左 对 齐 ， 第 12 行为 居中 对 齐 ， 第 13 行为 右 对 齐 格式 。 


3.3.2 ”换行 br 标记 


在 HIML 文件 中 , 插入 换行 标记 <br> 的 作用 和 普通 文档 插入 回 车 的 作用 一 样 ， 都 表示 
强制 性 换行 。 

基本 语法 

<br> 或 <br/> 

在 HIML 文档 中 ， 换 行 br 标记 属于 单 标志 ， 表 示 插 入 换行 符 。 
3.3.3 水 平分 隔 线 hr 标记 


水 平分 隔 线 标记 用 一 条 线 将 页 面 区 域 按照 功能 用 途 进行 分 隔 。hr 标记 是 单个 标记 。 
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1. 基 本 语法 

<hr width="" size="" color="" align="" noshade> 

水 平分 隔 线 hr 标记 的 属性 、 值 及 其 说 明 如 表 3-6 所 示 。 
表 3-6 ”<hr> 标 记 的 属性 、 值 及 其 说 明 








属 性 说 明 
width 设置 水 平 线 宽度 
size 整数 ， 单 位 px 设置 水 平 线 高 度 
color rgb 函数 、 十 六 进 制 数 ， 颜 色 英文 名 称 设置 水 平 线 颜色 
align leftlcenter|right 设置 水 平 线 对 齐 方 式 





【 例 3-3-2】 换 行 与 水 平分 隔 线 标记 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 3-7 所 示 。 


-i ED 一 回 


[SD rwetemt 2 Pox| Omissrmmene » 





















换行 与 水 平分 隅 线 标记 的 应 用 





帮 小 抽 。 导 这 5606， 六 四 回 


富 度 为 600ps、 大 小 为 5、 绿 色 、 居 右 对 齐 视频 讲解 





图 3-7 插入 水 平分 隔 线 


1 <!-- edu 3 3 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
5 <meta charset="UTF-8"> 
6 <tit1le> 换 行 与 水 平分 隔 线 标记 的 应 用 </title> 
7 </head> 
8 <body> 
9 <h4> 换 行 与 水 平分 隔 线 标记 的 应 用 </h4> 
10 <p><em> 大 小 为 3、 宽 度 为 60%$、 居 中 </em></p> 
和 <hr size="3" width="60%" color="#330099" noshade> 
Ce: <strong> 宽 度 为 600px、 大 小 为 5、 绿 色 、 居 右 对 齐 </strong><br><br> 
13 <hr width="600px" size="5" color="#00ee99" align="right"> 
14 </body> 
15 </html> 
2. 代码 解释 


代码 中 第 11 行 插入 1 条 “大 小 为 3、 宽 度 为 60%、 居 中 ”的 水 平分 隔 线 ; 第 13 行 插 
入 1 条 “宽度 为 600px、 大 小 为 5、 居 右 对 齐 ” 的 水 平分 隔 线 。 


3.3.4 拼音 /音标 注释 ruby 标记 和 rt/rp 标记 


ruby 标记 定义 ruby 注释 〈 中 文 注 音 或 字符 )。ruby 标记 与 开标 记 一 同 使 用 。ruby 标记 
由 一 个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 开标 记 组 成 ， 还 包括 可 选 的 
并 标记 ， 定 义 当 浏览 器 不 支持 ruby 标记 时 显示 的 内 容 。 效 果 如 图 3-8 所 示 。 

ruby 标记 用 它 将 需要 注释 或 注音 标的 文字 内 容 包围 住 。 

式 标记 这 里 面 放置 音标 或 注释 ， 这 个 标记 要 跟 在 需要 注释 的 文本 后 边 。 





z 标记 是 防备 那些 不 支持 ruby 标记 的 浏览 器 , 主要 用 来 放置 括号 。 对 于 支持 这 个 标记 
的 浏览 器 ，zp 标记 的 CSS 样式 是 {display:none;}， 也 就 是 不 可 见 。 
基本 语法 
<ruby> 
中 <rt><rp> (</rp>zhong<rp>)</rp></rt> 


国 <rt><rp> (</rp>guo<rp>)</rp></rt> 
</ruby> 


zhongguo 


中 国 


图 3-8 mby 标记 的 应 用 


3.3.5 段落 缩 进 blockquote 标记 


段落 缩 进 blockquote 标记 是 块 级 标记 ， 常 称 为 块 引用 标记 。 该 标记 引用 的 内 容 能 够 向 
右 缩 进 5 个 英文 字符 的 位 置 ， 并 在 其 内 容 的 周围 增加 外 边 距 。 
1. 基本 语法 


<blockquote> 引 用 的 内 容 </blockquote> 


【 例 3-3-3】 拼 音 /音标 注释 标记 与 块 引用 标记 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 
3-9 所 示 。 


ti- edu 3 3 3.htal =-> 
2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 





6 <title> 注 释 与 块 引用 标记 的 应 用 </title> 

7 <style type="text/css"> 

8 ruby{font-size:58px; font-family: 黑 体 ;text-align:center;} 
9 </style> 


10 </head> 
1 <body> 





12 <h5> 注 释 ruby 标 记 - 标 注 读音 </h5> 
13 <p align="center"><ruby> 
14 智 <rt><rp> (</rp>zhi<rp>)</rp></rt> 
15 慧 <rt><rp> (</rp>hui<rp>)</rp></rt> 
16 地 <rt><rp> (</rp>di<rp>)</rp></rt> 
17 球 <rt><rp> (</rp>qiti<rp>)</rp></rt> 
18 </ruby></p> 
19 <h5> 段 落 缩 进 标记 的 应 用 </h5> 
20 <hr color="green"> 
21 <p> 这 行文 字 没有 缩 进 </p> 
2 <blockquote> 这 行文 字 行 首 缩 进 5 个 字符 位 置 </blockquote> 
23 <blockquote><blockquote> 这 行文 字 行 首 缩 进 10 个 字符 位 置 </blockquote> 
</blockquote> 
24 </body> 3 
25 </html> 
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计生 文王 全 首 术 过 4 个 于 入 位 轩 
这 行 计生 四 六 入 10 人 于 特 位 置 









图 3-9 设置 段落 缩 进 

2. 代码 解释 

代码 中 第 13 一 18 行 设置 mby 标记 标注 汉语 拼音 。 第 21 行 , 此 行文 字 没 有 设置 块 引用 ， 
所 以 没有 缩 进 ; 第 22 行 设置 块 引用 ， 所 以 此 行文 字 行 首 缩 进 5 个 字符 位 置 ， 第 23 行 嵌 套 
使 用 2 个 块 引 用 标记 ， 此 行 行 首 向 右 缩 进 10 个 字符 的 位 置 。 
3.3.6” 预 格式 化 pre 标记 

在 HTML 中 利用 成 对 的 <pre></pre> 标 记 对 网 页 中 的 文字 段落 进行 预 格式 化 ,浏览 器 会 
完整 保留 设计 者 在 源 文 件 中 所 定义 的 格式 ， 包 括 各 种 空格 、 缩 进 以 及 其 他 特殊 格式 。 

1. 基本 语法 

<pre> 预 格式 化 文本 </pre > 

【 例 3-3-4】 预 格式 化 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 3-10 所 示 。 


1 <!-- edu 3 3 4.html] --> 






2 <!doctype html> 


3 <html lang="en"> 只 0 
4 <head> 、 
<meta charset="UTF-8"> 视频 讲解 
6 <title> 预 格式 化 </title> 

是 </head> 

8 <body> 

9 <h1><pre> 

10 春 晓 

1 

12 孟浩然 

13 春 眠 不 觉 晓 ， 

14 处 处 闻 啼 鸟 。 

15 夜来 风雨 声 ， 

16 花 落 知 多 少 。 

Eh </pre></h1> 

18 </body> 

19 </html> 





图 3-10 预 格 式 化 


2. 代码 解释 
代码 中 第 4 一 7 行 是 HTML 的 头 部 ， 包 含 元 信息 、 页 面 标题 ; 第 8 一 18 行 是 HIML 的 
主体 ， 其 中 第 9 一 17 行 对 文字 段落 进行 预 格式 化 。 


3.4 综合 实例 


以 “教育 信息 化 “十 三 五 ”规划 报告 ”为 主题 ， 参 照 给 定 的 HTML 代码 ， 完 成 Web 
网 页 的 设计 ， 页 面 效果 如 图 3-11 所 示 。 








本 报关 从 国际 教育 信息 化 发 展 、 国 内 考 人 人 发 展 、 研 发 动态 、 进 出 口 情况 、 重 点 生产 企业 、 存 在 的 问 
pr 市 场 的 发 展 态 上 对 教育 信息 化 的 发 展 前 景 伏 出 了 科学 的 预 币 ， 最 
后 对 教育 信息 化 投资 潜力 进行 了 分 析 * 
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图 3-11 教育 信息 化 “十 三 五 ”规划 报告 页 面 


1 < 一 -edu 3 4 1.html -==> 
2 <!doctype html> 
3 <html lang="en"> 








4 <head> 
9 <meta charset="UTF-8"> 
6 <tit1le> 教 育 信息 化 "十 三 五 "规划 报告 </title> 
7 </head> 
8 <body> 
9 <h2 align="center">2016-2021 年 教育 信息 化 行业 深度 分 析 及 "十 三 五 “发 展 规 
划 指 导报 告 </h2> 
10 <hr width="100%" size="3" color="red"> 
和 <pre> 
把 细 分 报告 : 教育 信息 化 市 场 研究 报告 ”教育 信息 化 市 场 调查 报告 教育 信息 
化 前 景 预测 报告 
3 教育 信息 化 市 场 分 析 报 告 ”教育 信息 化 市 场 评估 报告 教 
育 信息 化 重点 企业 报告 
14 教育 信息 化 发 展 前 景 报告 教育 信息 化 投资 规划 报告 
教育 信息 化 深度 研究 报告 
15 教育 信息 化 投资 前 景 报告 教育 信息 化 项 目 调研 报告 
16 </pre> 
机 <hr width="100%" size="1" color="#000fff"> 
18 <h4> 报 告 导 读 </h4> 第 
9 <p>gnbsp; gnbsp; gnbsp; gnbsp; 本 报告 从 国际 教育 信息 化 发 展 、 国 内 教育 信息 化 
政策 环境 及 发 展 、 研 发 动态 、 进 出 口 情况 、 重 点 生产 企业 、 存 在 的 问题 及 对 策 等 多 方面 | 3 
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多 角度 阑 述 了 教育 信息 化 市 场 的 发 展 , 并 在 此 基础 上 对 教育 信息 化 的 发 展 前 景 做 出 了 科 
学 的 预测 ， 最 后 对 教育 信息 化 投资 潜力 进行 了 分 析 。</p> 

20 <h4> 郑 重 声明 </h4> 

2 <p><blockquote> 本 报告 由 中 国 报告 大 厅 出 版 发 行 ， 报 告 著作 权 归 宇 博 智 业 所 有 。 
本 报告 是 宇 博 智 业 的 研究 与 统计 成 果 ， 有 偿 提 供给 购买 报告 的 客户 使 用 。 未 获得 宇 博 
智 业 书面 授权 ， 任 何 网 站 或 媒体 不 得 转载 或 引用 ， 和 否则 宇 博 智 业 有 权 依 法 追究 其 法 律 
责任 。 如 需 订 阅 研 究 报告 ， 请 直接 联系 本 网 站 ， 以 便 获 得 全 程 优质 完善 服务 。 





</blockquote></p> 
2 <hr width="100%" size="1" color="#000fff"> 
23 <p align="center">Copyrightg&gcopy; 中 国 报 告 大 厅 京 ICP 备 11010674 号 -2 


京 公 网 安 备 11010502024380</p> 
24 </body> 
25 </html> 


上 述 代 码 中 第 4~7 行 是 HTML 的 头 部 ; 第 8~24 行 是 HTML 的 主体 ， 其 中 第 10 行 、 
第 17 行 定义 2 条 水 平分 隔 线 :第 11~16 行 应 用 预 格式 化 标记 ， 第 18 行 和 第 20 行 应 用 标 
题字 h4 标记 ; 第 19 行 和 第 21 行 定义 2 个 段落 ， 分 别 应 用 空格 和 段落 缩 进 标记 ; 第 23 行 
应 用 段落 居中 和 特殊 符号 。 





本 章 小 结 


本 章 主 要 介绍 了 格式 化 文字 与 段落 的 各 种 标记 ， 包 括 标题 字 标记 、 字 体 标 记 、 文 本 修 
饰 标记 以 及 段落 相关 的 标记 。<hl> 一 <h6> 是 标题 字 标 记 ， 通 过 align 属性 设置 标题 字 的 对 
齐 方式 。 空 格 与 特殊 字符 都 需要 通过 代码 控制 来 添加 。 字 体 标记 主要 通过 font 标记 的 属性 
改变 字体 、 颜 色 、 大 小 。 文 本 修饰 标记 主要 是 对 文本 进行 一 些 特殊 的 修饰 。 

段落 与 排版 标记 会 使 网 页 文字 显得 更 加 清晰 ， 介 绍 了 段落 p 标记 、 换 行 br 标记、 水平 
分 隔 线 hr 标记 、 注 释 ruby 标记 、 段 落 缩 进 blockquote 标记 的 使 用 方法 。 

在 网 页 设计 中 ， 对 网 页 的 文字 进行 必要 的 布局 并 添加 页 面 效 果 ， 从 而 使 网 页 更 加 美观 
和 丰富 ， 要 合理 地 使 用 本 节 介 绍 到 的 各 种 文字 和 段落 标记 。 





练习 与 实验 
练习 3 
1. 选择 题 
(1) 下 列 不 是 字体 标记 的 属性 的 是 (。”)。 
(A) align (B) size (C) color (D) face 


(2) 关于 标题 字 标 记 对 齐 方式 ， 标 记 属 性 取 值 不 正确 的 是 各 
(A) 居中 对 齐 : <hl align="middle">…</hl> 
(B) 居 右 对 齐 : <h2 align="right">…</h2> 
(C) 居 左 对 齐 : <h4 align="left">…</h4> 
(D) 两 端 对 齐 : <h6 align="justify">…</h6> 
(3) 下 列 选项 中 表示 字体 标记 的 是 法 


(A) <boby></body> (B) <font> </font> (C) <br> (D) <p></p> 
(4) 下 列 选项 中 表示 段落 标记 的 是 (  )。 


(A) <html>< / html> (B) <boby></body> 
(C) <p></p> (D) <pre></ pre> 
(5) 在 HTML 中，<h3></h3> 是 ( ) 标记 。 
(A) 标题 字 (B) 预 格式 化 (C) 换行 ”(D) 随意 显示 信息 
(6) 下 列 标 记 中 ， 设 置 页 面 标 题 的 标记 是 )。 
(A) <title></title> (B) <caption></caption> 
(C) <head> </head> (D) <html></html> 
(7) 下 列 标记 中 表示 单个 标记 的 是 〈 和 
(A) body 标记 (B) br 标记 
(C) html 标记 (D) title 标记 
(8) <title></title> 标 记 是 放 在 〈 ) 标记 内 。 
(A) <pre> </pre> (B) <head> </head> 
(C) <body> </body> (D) </head> <body> 
(9) 下 列 选项 中 表示 版 权 符 号 的 是 Ds 
(A) &lt; (B) &egt; (C) &reg; (D) &copy; 
(10) HTML 中 <hr> 的 作用 是 (。 )。 
(A) 搬入 一 条 水 平分 隔 线 (B) 换行 
(C) 插入 一 个 空格 (D) 加 粗 字体 
2. 填空 题 


(1) HTML 网 页 文件 的 主体 标记 是 ， 设 置 页 面 标 题 的 标记 是 。 

(2) 一 个 HTML 文档 的 开始 标记 是 ; 结束 标记 是 。 

(3) 设置 文档 标题 以 及 其 他 不 在 Web 网 页 上 显示 的 信息 的 开始 标记 是 ”_; 结束 标 
记 是 





(4) 网 页 中 可 显示 的 信息 是 包含 在 以 为 开始 标记 ， 以 为 结束 标记 之 间 。 
(5) 网 页 标题 会 显示 在 浏览 器 的 标题 栏 中 ， 则 网 页 标题 可 使 用 标记 来 定义 。 





(6) 与 标记 <b></b> 功 能 相同 的 标记 是 ; 与 标记 <i></i> 功 能 相同 的 标记 是 
(7) 标记 是 由 一 个 或 多 个 需要 解释 /发 音 的 字符 和 一 个 提供 该 信息 的 
标记 组 成 , 还 包括 可 选 的 标记 ,定义 当 浏 览 器 不 支持 ruby 标记 时 显 
示 的 内 容 。 
3. 简 答 题 


(1) 简 述 格式 化 文本 标记 分 几 类 ， 并 举例 说 明 。 
(2) 简 述 有 哪些 段落 与 排版 标记 及 其 作用 。 





实验 3 
1. 编写 代码 实现 如 图 3-12 所 示 的 页 面 效果 。 设 计 要 求 : 页 面 上 方 水 平分 隔 线 粗细 为 “| 第 
lpx、 颜 色 为 #000fH， 页 面 下 方 水 平分 隔 线 粗细 为 lpx、 颜 色 为 #00ffff。 3 
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图 3-12 自荐 信和 页 面 


2. 按 如 下 要 求 设 计 Web 页 面 ， 如 图 3-13 所 示 。 要 求 如 下 : 

(1) 3 号 标题 字 设置 标题 “数学 方程 式 ” 样式 采用 style 标记 定义 ， 格 式 为 字体 大 小 
24px、 颜 色 红 色 、 文 本 居中 对 齐 ; 

(2) 一 条 宽度 为 80%、 大 小 为 2px、 颜 色 为 蓝 色 的 水 平 线 ; 

(3) 方程 式 1，2x2+3x=9; 

(4) 方程 式 2: x1+x2=10; 

(5) 在 头 部 插入 样式 标记 ， 定 义 如 下 : 


<style type="text/css"> 
h3{font-size:24px;color:red;text-align:center;} 
</style> 





3-13 ”标题 字 标 记 及 文本 标记 的 应 用 





第 4 章 列 表 





本 章 学 习 目 标 


大 型 IT 网 站 如 网 易 、 搜 狐 、 新 浪 等 的 首页 导航 栏目 均 采 用 列表 方式 来 显示 信息 。 通 过 
列表 知识 的 学 习 ， 能 够 了 解 列表 的 类 型 ， 掌 握 无 序列 表 、 有 序列 表 、 定 义 列 表 的 作用 及 使 
用 方法 ; 学 会 使 用 不 同 列表 类 型 及 嵌 套 列表 来 解决 网 页 设计 中 遇 到 的 一 些 实际 问题 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 了 解 列表 的 类 型 。 

。 掌握 无 序列 表 、 有 序列 表 、 定 义 列表 标记 语法 及 属性 语法 。 

。 学 会 使 用 无 序 、 有 序 及 定义 列表 设计 Web 网 页 。 

。 学 会 使 用 嵌 套 列表 设计 小 型 网 站 首页 。 


4.1 列表 概述 


列表 能 对 网 页 中 的 相关 信息 进行 合理 的 布局 ， 将 项 目 有 序 或 无 序 地 罗列 在 一 起 ， 便 于 
用 户 浏览 和 操作 。 列 表 分 为 无 序列 表 、 有 序列 表 、 定 义 列表 、 菜 单列 表 和 目录 列表 共 五 种 。 
但 常用 列表 有 三 种 ， 分 别 是 无 序列 表 、 有 序列 表 、 定 义 列表 。 列 表 类 型 如 表 4-1 所 示 。 


表 4-1 列表 类 型 与 标记 符号 









列表 类 型 





















菜单 列表 <menu>...</menu> 不 常用 
目录 列表 <dir>...</dir> 不 常用 
有 序列 表 <ol>...</ol> | 常用 





<dl>...</d> 


4.2 无 序列 表 


无 序列 表 ul (Unordered List) 标记 是 成 对 标记 ，<ul> 是 开始 标记 ，</ul> 是 结束 标记 ， 
两 者 之 间 插 入 若干 个 列表 项 1 (List Items) 标记 ， 完 成 无 序列 表 的 插入 。 

1. 基本 语法 

<ul type=""> 


<1i type=""> 项 目 名 称 </1i> 
<1i type=""> 项 目 名 称 </1i> 


</ul> 
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2. 语法 说 明 

也 标记 的 type 属性 有 三 个 值 ， 如 表 4-2 所 示 。 列 表 项 i 标记 的 type 属性 取 值 与 dl 标 
记 相同 。 设 置 ul 标记 的 type 属性 会 使 其 所 包含 的 列表 项 按 统一 风格 显示 ， 设 置 其 中 某 一 
列表 项 的 type 属性 值 时 只 会 影响 它 自 身 的 显示 风格 ， 其 他 列表 项 按 原 样 显 示 。 


表 4-2 无 序列 表 标记 的 type 属性 及 其 说 明 











属 性 值 说 明 
disc 实心 圆 形 。 
circle 空心 圆 形 o 
Square 实心 正方 形 里 





【 例 4-2-1】 无 序列 表 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 4-1 所 示 。 
= 3 < 一 本 
Ce Wemmt 2 P- Cx 
Dise 项 目 符号 列表 ， 
。 计 算 机 科学 与 技术 专业 
。 软件 工程 专 : 
9 信息 管理 与 信息 系统 专业 
Cirde 项 目 符号 列表 。 
。 计算 机 科学 与 技术 专业 














。 软件 
9 信息 管理 与 信息 系统 专业 


Sqware 项 目 符号 询 表 ， 
。 计算 机 科学 与 技术 专业 
软件 工程 专业 
。 信息 乱 理 与 信息 系统 专业 





图 4-1 无 序列 表 的 应 用 
1 <!-- edu 4 2 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 无 序列 表 </title> 

+ </head> 

8 <body> 

9 <h4>Disc 项 目 符号 列表 : </h4> 

10 <ul type="disc"> 

11 <1i> 计 算 机 科学 与 技术 专业 </1i> 
12 <1i> 软 件 工程 专业 </1i> 

13 <1i type="circle"> 信 息 管理 与 信息 系统 专业 </1i> 
14 </ul> 

15 <h4>Circle 项 目 符号 列表 : </h4> 

16 <ul type="circle"> 

47 <1i> 计 算 机 科学 与 技术 专业 </1i> 
18 <1i type="square"> 软 件 工程 专业 </1i> 
ig <1i> 信 息 管理 与 信息 系统 专业 </1i> 
20 </ul> 

2 <h4>Square 项 目 符号 列表 : </h4> 

22 <ul type="square"> 

23 <1i> 计 算 机 科学 与 技术 专业 </1i> 
24 <1i> 软 件 工程 专业 </1i> 

25 <1i> 信 息 管理 与 信息 系统 专业 </1i> 


26 </ul> 


27 </body> 

28 </html> 

3. 代码 解释 

代码 中 第 10 一 14 行列 表 符 号 为 实心 圆 形 ， 除 第 13 行 定义 了 列表 项 的 type 属性 值 为 
"circle"， 所 以 此 项 前 面 显示 空心 圆 ， 第 16 一 20 行列 表 符 号 为 空心 圆 形 ， 除 第 18 行 定 义 了 
列表 项 的 type 属性 值 为 "square"， 所 以 此 项 前 面 显示 实心 正方 形 ; 第 22 一 26 行列 表 符号 为 
实心 正方 形 。 通 过 设置 type 属性 值 来 改变 列表 项 前 面 的 符号 。 


43 有 序列 表 


有 序列 表 ol (Ordered List) 标记 是 成 对 标记 ， 以 <ol> 为 起 始 标记 ， 以 </ol> 为 结束 标记 ， 
在 其 间 使 用 <li></li> 标 记 完 成 有 序列 表 项 目的 插入 。 

1. 基本 语法 

<ol type="" start=""> 


<1i type="" value="n"> 项 目 名 称 </1i> 
<1i type="" value="n"> 项 目 名 称 </1i> 


</o1> 


在 <ol>、</ol> 标 记 之 间 必 须 使 用 <li><Ji> 标 记 来 添加 列表 项 值 。 

2. 属性 说 明 

1) 列表 ol 标记 的 属性 

。 type: 列表 项 前 面 的 编号 ， 编 号 是 有 序 的 ， 有 五 种 不 同类 型 。 

。 start: 定义 有 序列 表 起 始 编号 ， 默 认 值 为 1。 设 置 其 为 非 1 时 ， 列 表 项 前 编号 起 始 
位 置 会 发 生 改变 , 如 start="5", 当 type="1" 时 , 表示 从 第 5 个 开始 编号 ; 当 type="A"， 
表示 从 王 开始 编号 ， 以 此 类 推 。 

2) 列表 项 标记 的 属性 

。 type: 只 影响 当前 列表 项 前 面 编 号 类 型 ， 后 续 列 表 项 前 面 编 号 类 型 依旧 遵循 ol 标记 
的 type 属性 的 取 值 。 

。 value: 改变 当前 列表 项 前 编号 的 值 ， 并 影响 其 后 所 有 列表 项 编号 的 值 。 

有 序列 表 ol 标记 的 属性 、 值 及 说 明 如 表 4-3 所 示 。 


表 4-3 有 序列 表 的 属性 、 值 及 说 明 
属 性 值 说 明 
| 定义 有 序列 表 中 列表 项 前 面 的 编号 为 数字 列表 
| 定义 有 序列 表 中 列表 项 前 面 的 编号 为 大 写字 母 列表 
| 定义 有 序列 表 中 列表 项 前 面 的 编号 为 小 写字 母 列表 
| 
| 














定义 有 序列 表 中 列表 项 前 面 的 编号 为 大 写 罗马 字母 列表 
定义 有 序列 表 中 列表 项 前 面 的 编号 为 小 写 罗马 字母 列表 
值 有 序列 表 中 列表 项 的 起 始 数字 
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Start 
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册 上 小 
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【 例 4-3-1】 有 序列 表 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 4-2 所 示 。 


1 <!-- edu 4 3 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 
































4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 有 序列 表 </title> 
~ </head> 
8 <body> 
9 <h4>1 数 字 编号 : </h4> 
10 «OLS 
11 <1i> 计 算 机 科学 与 技术 专业 </1i> 
12 <1i> 软 件 工程 专业 </1i> 
13 <1i> 信 息 管理 与 信息 系统 专业 </1i> 
14 <1i> 电 子 信息 工程 专业 </1i> 
15 </olk> 
16 <h4>A 字 母 编号 : </h4> 
17 <ol type="A"> 
18 <1i> 计 算 机 科学 与 技术 专业 </1i> 
19 <1i> 软 件 工程 专业 </1i> 
20 <1i> 信 息 管理 与 信息 系统 专业 </1i> 
21 <1i> 电 子 信 息 工程 专业 </1i> 
22 </ol1> 
28 <h4>aI 混 合 编号 : </h4> 
24 <ol type="a"> 
25 <1i> 计 算 机 科学 与 技术 专业 </1i> 
26 <1i type="I" value="5"> 软 件 工程 专业 </1i> 
27 <1i> 信 息 管理 与 信息 系统 专业 </1i> 
28 <1i> 电 子 信息 工程 专业 </1i> 
29 <1i> 电 子 科学 与 技术 专业 </1i> 
30 <1i> 物 联网 工程 专业 </1i> 
31 </ol> 
32 </body> 
33 </html> 
让利 学 技术 < 业 
2 软件 
3， 信 息 管理 与 信息 系统 专业 
改变 列 4 ”电子 信息 工程 专业 
表 项 的 类 型 A 宁 母 编号 : 
和 编号 的 属 人 计生 
性 值 会 影响 @ 信和 和 信息 季 纺 $ 业 
本 身 的 编号 D， 电 子 信息 工程 专业 
类 型 和 后 面 al 混合 编号 : 
列表 项 编号 a He 
的 J 序 i 
人 
图 4-2 有 序列 表 的 应 用 
3. 代码 解释 


代码 中 第 10 一 15 行 实现 数字 编号 的 有 序列 表 ; 第 17 一 22 行 实现 大 写字 母 编号 的 有 序 


列表 ， 第 24 一 31 行 实现 小 写字 母 和 大 写 罗 马 混合 编号 的 有 序列 表 ， 由 于 第 26 行 设置 了 列 
表 项 的 type 属性 为 "T"、value 属性 为 "5"， 致 使 当前 列表 项 前 的 编号 变 成 大 写 罗马 字母 ， 开 
始 顺序 为 "V"， 大 写 罗 马 字母 中 第 5 个 正好 是 V。 从 第 3 个 列表 项 开始 向 后 所 有 列表 项 的 
编号 顺序 随 之 发 生 改变 ,顺序 从 第 6 个 小 写字 母 了 开始 向 后 连续 编号 ， 分 别 是 fg、h、i。 


4.4 列表 族 套 


在 一 个 列表 中 嵌入 另 一 个 列表 ， 作 为 此 列表 的 一 部 分 ， 叫 列表 嵌 套 。 有 序列 表 、 无 序 
列表 可 以 混合 嵌 套 ， 浏 览 器 都 能 够 自动 地 嵌 套 排列 。 

使 用 列表 嵌 套 不 仅 使 网 页 的 内 容 布局 更 加 合理 美观 ， 而 且 使 其 内 容 看 起 来 更 加 简洁 。 
列表 和 骨 套 的 方式 分 无 序列 表 的 嵌 套 、 有 序列 表 的 嵌 套 ， 还 可 以 是 无 序列 表 和 有 序列 表 的 混 
合 嵌 套 。 列 表 嵌 套 不 能 交叉 嵌 套 。 如 <ul><ol></ul></ol> 就 是 错误 的 嵌 套 。 当 然 定义 列表 也 
可 以 与 无 序列 表 、 有 序列 表 进 行 嵌 套 。 


1. 基本 语法 

让 ai> <!-- 无 序列 表 中 嵌 套 有 序列 表 -> 
到 <1i> 项 目 名 称 

3 <ol> <!-- 有 序列 表 中 又 嵌 套 无 序列 表 --> 
4 <1i> 项 目 名 称 </1i> 

5 <1i> 项 目 名 称 

6 <ul> 

7 <1i> 项 目 名 称 </1i> 

8 <1i> 项 目 名 称 </1i> 

3 站 
10 </ul> 
3 </1i> 
:2 <1i> 项 目 名 称 </1i>... 
3 </ol> 
14 </1i> 


15 <1i> 项 目 名 称 </1i> 
16 <1i> 项 目 名 称 </1i> 


17 </ul> 
【 例 4-4-1】 有 序列 表 和 无 序列 表 嵌 套 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 4-3 所 示 。 
1 <!-- edu 4 4 1.html --> Rs 





2 <!doctype html> 
3 <html lang="en"> 


4 <head> 视频 讲解 


5 <meta charset="UTF-8"> 

6 <title> 有 序列 表 和 无 序列 表 幅 套 </title> 
7 </head> 

8 <body> 

9 <h4> 清 华 大 学 出 版 社 图 书 分 类 </h4> 

10 <ol type="1"> 

证 <1i><h4> 计 算 机 与 电子 信息 </h4> 


丈 藤 


山上 浊 


Web 所 详 开 竹 太 天 一 一 HTML5、CSS3、JavaScript ( 菇 3 上 旗 ) 





12 <ol type="A"> 

13 <1i> 数 据 库 </1i> 

14 <1i> 电 子 信息 </1i> 

15 <1i> 计 算 机 组 成 与 原理 </1i> 
16 <1i> 计 算 机 基础 

2 <ul type="disc"> 

18 <1i> 计 算 机 文化 基础 </1i> 
19 <1i> 公 共 基 础 </1i> 
20 <1i> 软 件 技术 基础 </1i> 
a1 <1i> 计 算 机 导论 </1i> 
22 <1i> 计 算 思维 </1i> 
23 </ul> 

24 </1i> 

25 </ol> 

26 </1i> 

27 <1i><h4> 理 工 </h4></1i> 

28 <1i><h4> 经 管 与 人 文 </h4></1i> 

29 </ol> 

30 </body> 

31 </html> 

2. 代码 解释 


代码 中 第 10 一 29 行 定义 有 序列 表 ， 第 12 一 25 行 在 有 序列 表 中 网 套 了 1 个 有 序列 表 ， 
第 17 一 23 行 又 在 有 序列 表 中 嵌 套 了 1 个 无 序列 表 。 





本 es 
| wps BD - cx | 四 漠 t 大 9suRt 醒 福 、 > 
清华 大 学 出 版 社 图 书 分 类 
1 计算 机 与 电子 信息 
A 数据 库 
B， 电 子 信息 
C、 计 算 机 组 成 与 原理 
D， 计 算 机 基础 











。 计算 机 文化 基础 
。 公共 基础 

。 软 件 技术 基础 
。 计 站 机 导论 

。 计算 息 维 


2 理工 
3. 经 管 与 人 文 














4-3 ”清华 大 学 出 版 社 图 书 分 类 


4.5 定义 列表 


定义 列表 dl (definition list) 标记 是 成 对 标记 ， 以 <dl> 为 首 标 记 ， 以 </dl> 为 尾 标记 。 
定义 列表 由 dt 〈definition term) 标记 和 dd (definition description) 标记 组 成 。 定 义 列表 中 
每 一 个 元 素 的 标题 使 用 <dt>.…</de> 标 记 定义 ;后面 跟随 <dd>...</dd> 标 记 ， 用 于 描述 列表 
中 元 素 的 内 容 。 


o 


1. 基本 语法 


<dl> 
<dt> 项 目 1</dt> 
<dd> 描 述 1</dd> 
<dd> 描 述 2</dd> 
<dd> 描 述 3</dd> 
<qdt> 项 目 2</dt> 
<dd> 描 述 1</dd> 
<dd> 描 述 2</dd> 
<dt> 项 目 n</dt> 
</dl> 


2. 语法 说 明 


在 网 页 中 每 一 个 dt 标记 可 由 一 个 或 多 个 dd 标记 组 成 。 这 两 个 标记 只 能 在 dl 标记 中 使 
定义 列表 的 每 一 列表 项 前 面 既 没有 符号 ， 也 没有 编号 。 
【 例 4-5-1】 定 义 列表 展示 联系 人 信息 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 4-4 所 示 。 


tn 


2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 定 义 列表 </title> 
7 </head> 
8 <body> 
9 <h4> 定 义 列表 展示 联系 人 信息 </h4> 
10 <dl> 
天 <dt> 联 系 人 :</dt> 
12 <dd> 张 有 为 之 </dd> 
13 <qdd> 电 话 : 010-11011011</dd> 
14 <dd>E-mail: xyz@sina.com</dd> 
15 <dt> 联 系 地 址 :</dt> 
16 <dd> 上 海 市 复旦 大 学 计算 机 系 10 计 算 机 班 </dd> 
于 <qdt> 邮 政 编码 :</dt> 
18 <dd>200433</dd> 
19 </dl> 
20 </body> 
21 </html> 
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定义 列表 展示 联系 人 信息 


联系 人 : 


张 有 为 之 

电话 ，010-11011011 

E-mail: xyz@si 
联系 地 址 ”，， ，， 

上 海 市 复旦 大 学 计算 机 系 10 计 算 机 班 
邮政 编码 


x 








图 4-4 定义 列表 展示 联系 人 信息 
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3. 代码 解释 
代码 中 第 10 一 19 行 定 义 了 定义 列表 ， 第 11 行 、 第 15 行 、 第 17 行 定义 了 列表 项 的 标 
第 12 一 14 行 、 第 16 行 、 第 18 行 定义 了 列表 项 的 描述 。 


4.6 综合 实例 





视频 讲解 
以 “百度 糯米 ”美食 服务 项 目 为 例 ， 设 计 简 易 网 站 首页 ， 页 面 效 果 如 图 4-5 所 示 。 


1 <!-- edu 4 6 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 多 种 列表 在 网 页 中 使 用 </title> 

7 </head> 

8 <body> 

号 <h4> 百 度 糯米 -便宜 实惠 ， 品 质保 证 ， 服 务 专业 ! </h4> 
10 <img src="baidunuomei .png" width="541" height="85" border="0" alt=""> 
11 <ul> 

12 <1i> 麻 辣 溪 / 冒 菜 </1i> 

13 <1i> 美 食 

14 <ul> 

25 <1i> 中 和 餐 /家 常 菜 </1i> 

16 <1i> 夏 日 饮品 

17 <ul> 

18 <1i> 米 芝 莲 : 24 元 </1i> 

19 <1i> 沪 上 阿姨 : 12 .90 元 </1i> 
20 <1i> 哆 哆 鲜 奶 吧 : 30 元 </1i> 
21 <1i> 黄 记 玉米 汁 ，80 元 </1i> 
22 </ul> 

宇 | </ 

24 </ul> 

25 < 

26 <1i> 创 意 菜 /私房 菜 </1i> 

27 </ul> 

28 <dl> 

29 <dt> 联 系 客 服 人 员 :</dt> 

30 <dd> 邮 箱 : nuomihelp@baidu.com</dd> 
31 <dd> 周 一 至 周 日 9:00-22:00</dd> 

32 <qt> 客 服 电话 免 长 途 费 </adt> 

33 <dd>4006-888-887</dd> 

34 </dl> 

35 </body> 

36 </html> 


上 述 代码 中 第 11 一 27 行 定义 了 嵌 套 的 无 序列 表 ， 将 美食 分 为 中 和 餐 / 家 常 菜 、 夏 日 饮品 ， 


其 中 夏 日 饮品 分 为 米 芝 莲 、 沪 上 阿姨 、 哆 哆 鲜 奶 吧 、 黄 记 玉 米 汁 。 第 28 一 34 行 定义 了 定义 列 
表 , 用 于 显示 客服 人 员 信息 ;第 10 行 采用 img 标 记 插入 一 张 百度 糯米 logo 图 (baidunuomeipng)。 
其 中 无 序列 表 多 层 榜 套 时 ， 每 层 列表 项 前 面 的 符号 会 自动 变化 ， 依 次 为 “@”“O”“ 国 ” 








无 序列 表 : 
嵌 套 时 ， 列 表 -六 8 
项 前 面 的 符号 
自动 变化 。 




















4006-888-887 


图 4-5 多 种 列表 的 应 用 


本 章 小 结 


本 章 介绍 了 五 种 类 型 HTML 列表 ,分 别 是 无 序列 表 、 有 序列 表 、 定 义 列表 、 菜 单列 表 
和 目录 列表 。 但 常用 的 列表 只 有 三 种 ， 分 别 是 无 序列 表 、 有 序列 表 、 定 义 列表 。 菜 单列 表 
和 目录 列表 可 以 认为 是 无 序列 表 的 特例 。 

列表 可 以 嵌 套 ,但 不 能 交叉 嵌 套 ， 否 则 会 发 生 语法 错误 。 列 表 可 以 由 无 序列 表 和 有 序 
列表 的 多 层 子 列表 构成 ， 从 而 使 得 网 页 内 容 的 呈现 更 具 层次 感 和 美观 感 。 

无 序列 表 的 列表 项 有 项 目 符号 (三 种 )， 有 序列 表 的 列表 项 有 项 目 编号 (五 种 )， 定 义 
列表 项 目前 既 没有 编号 ， 也 没有 符号 。 


练习 与 实验 
练习 4 

1. 选择 题 
(1) 下 列 HIML 标记 中 ， 属 于 非 成 对 标记 的 是 Be 

(A) <ol> (B) <ul> (C) <meta> (D) <font> 
(2) 下 列 标记 中 可 以 定义 有 序列 表 的 标记 是 We 

(A) <dl></dl> (B) <ol> </ol> 

(C) <ul><mul> (D) <dd></dd> 
(3) 定义 列表 中 项 目 描述 使 用 的 标记 是 〈 

(A) <dl></d>  B) <dd></dd> (C) <dt></dt> (D) <li></li> 
(4) 无 序列 表 的 type 属性 默认 值 是 〈 闷 

(A) circle (B) square (C) disc (D) line 


(5) 有 序列 表 的 编号 种 类 有 ( ”) 个 。 
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(A)3 (B)4 CE (DS 

2. 填空 题 

(1) 在 HIML 文件 中 ，ul 标记 之 间 必 须 使 用 <li><Ji> 标 记 的 作用 是 

(2) 在 HTML 文件 中 ， 常 用 的 列表 有 及 定义 列表 。 

(3) 设置 有 序列 表 的 属性 可 以 改变 编号 的 起 始 值 ， 该 属性 值 的 类 型 是 ， 
表示 从 哪 一 个 数字 或 字母 开始 编号 .设置 列表 项 的 属性 后 可 以 使 该 项 目前 面 的 编号 
发 生变 化 , 但 后 续 的 列表 项 前 面 的 编号 类 型 仍 遵循 原来 的 编号 规则 , 只 是 顺序 发 生 了 改变 。 

3， 简 答题 

(1) 简 述 列表 类 型 及 常用 列表 有 哪些 。 

(2) 简 述 定义 列表 与 无 序列 表 、 有 序列 表 的 差异 。 

(3) 简 述 无 序列 表 与 有 序列 表 外 在 表现 的 差异 。 


实验 4 


1. 编写 代码 实现 Windows 操作 系统 的 各 种 版 本 的 展示 ， 如 图 4-6 所 示 。 

2. 编写 代码 实现 “第 四 届 中 国 大 学 出 版 社 图 书 奖 公示 ” 页 面 ， 如 图 4-7 所 示 。 要 求 
如 下 : 

(1) 页 面 标题 为 :“ 第 四 届 中 国 大 学 出 版 社 图 书 奖 公 示 ”; 

(2) 页 面 内 容 : 2 号 标题 标记 显示 “第 四 届 中 国 大 学 出 版 社 图 书 奖 公 示 ” 页 面 背景 色 
为 “#ccffcc”， 按 图 效果 完成 页 面 设计 。 
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,windows 95 引 | 第 四 届 中 国 大 学 出 版 社 图 书 奖 公示 


优秀 教材 一 等 奖 (68 种 ) 
人 (第 五 版 )， ee ee 
则 文 ， 于 轿 Te 编 车， 北京 大 学 出 版 社 
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te 
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windows 2000 Advance Server 个 (第 ?版 ) ， 杨 补 、 谢 雷 Es 和 
.windows xp 出城 | 
windows vista 赢得 持续 竞争 优势 《第 2 版 》， a 北京 大 学 出 版 社 
windows 7 Ey (第 线 )， 情 松 滨 主 缩 ， 北 京 大 学 医学 出 上 
windows 8 本 
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第 5 音 超 链接 与 浮动 框架 





本 章 学 习 目 标 


通过 超 链 接 和 浮动 框架 等 知识 的 学 习 ， 能 够 掌握 超 链接 和 浮动 框架 的 语法 和 创建 方 
法 ， 理 解 超 链接 的 分 类 、 路 径 等 相关 概念 ， 学 会 利用 超 链接 设置 书签 、 文 件 下 载 、FTP 下 
载 、 电 子 邮件 等 ， 会 使 用 超 链接 与 浮动 框架 关联 设计 Web 网 页 导航 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 掌握 超 链 接 的 基本 标记 语法 和 属性 语法 。 

。 理解 超 链接 分 类 、 路 径 、 书 签 等 概念 。 

学 会 使 用 超 链接 实现 文件 下 载 、FTP 下 载 、 电 子 邮件 链接 、 图 像 链接 。 
学 会 使 用 超 链接 制作 书签 。 
学 会 使 用 浮动 框架 实现 内 财 页 面 的 显示 。 


5.1 ”起 链接 概述 


有 了 超 链接 , 使 得 各 个 独立 的 网 页 可 以 有 机 地 链接 在 一 起 构成 一 个 网 站 。 所谓 超 链接 ， 
是 指 从 一 个 网 页 指向 一 个 目标 的 连接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相同 网 
页 上 的 不 同位 置 ， 还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程 
序 。 用 户 通过 浏览 器 浏览 网 页 ， 打 开 页 面 上 的 超 链接 后 ， 可 能 访问 新 的 页 面 上 的 内 容 。 例 
如 百度 首页 ， 如 图 5-1 所 示 ， 单 击 网 页 中 “新 闻 ” 链 接 ， 会 跳 转 到 百度 新 闻 的 首页 。 
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图 5-1 百度 首页 和 百度 新 闻 页 面 
5.2 ”起 链接 语法 、 路 径 及 分 类 


5.2.1 ” 超 链 接 语法 


在 网 页 文件 中 ， 超 链接 通常 使 用 链接 a 标记 的 超 文本 引用 href (Hypertext Reference) 


Web 所 详 开 和 八 龙 大 一 一 HTML5、CSS3、JavaScript ( 劳 3 眠 ) 





属性 建立 目标 对 象 ， 当 前 文档 便 是 链接 源 ，href 设置 的 属性 值 是 目标 文件 。 
1. 基本 语法 


<a href="url"” name="" title=" 提 示人 信息” target=" 窗 口 名 称 "> 超 链接 标题 </a> 


2. 语法 说 明 
超 链 接 a 标记 以 <a> 开 始 ， 以 </a> 结 束 。 其 间 内 容 为 超 链接 标题 。 超 链接 由 目的 地 址 、 
链接 标题 、 打 开 位 置 三 部 分 组 成 。 
3. 属性 说 明 
。 href: 链接 指向 的 目标 文件 。 
name: 规定 锚 (anchor) 的 名 称 。 
title: 指向 链接 的 提示 信息 。 
target: 指定 打开 的 目标 窗口 ， 如 表 5-1 所 示 。 


表 5-1 target 属性 、 值 及 说 明 表 


属 性 值 说 ”有明 

_self 在 当前 框架 中 打开 链接 

_blank 在 一 个 全 新 的 空白 窗口 中 打开 链接 

_top 在 顶层 框架 中 打开 链接 ， 也 可 以 理解 为 在 根 框架 中 打开 链接 
_parent 在 当前 框架 的 上 一 层 打开 链接 

framename 在 指定 的 框架 或 浮动 框架 内 打开 链接 ， 框 架 名 称 可 以 自 定义 


【 例 5-2-1】 超 链接 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 5-2 所 示 。 




















5-2” 超 链接 的 应 用 


1 <t== edu 5 2 1.htnl ==> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

Ss <meta charset="UTF-8"> 

6 <title> 超 链接 应 用 </title> 

证 </head> 

8 <body> 

9 <h3> 超 链接 导航 </h3> 

10 <a href="http://www.baidu.com" title="BaiDu"> 百 度 </a><br> 

11 <a href="http://www.edu.cn" target=" blank" title="CERNET"> 中 国 
教育 与 科研 计算 机 网 </a><br> 

12 <a href="http://www.sina.com.cn" target=" self" title="Sina"> 新 
浪 </a> 

生生 </body> 


14 </html> 


4. 代码 解释 

代码 中 第 10 一 12 行 在 主体 body 标记 插入 三 个 超 链接 标记 , 分 别 设 置 了 超 链接 的 href、 
title 、target 属性 。 当 光标 移 到 超 链接 * 中 国教 育 与 科研 计算 机 网 "时 ， 会 弹出 提示 信息 
“CERNET”， 如 图 5-2 所 示 。 通 常 文本 超 链接 的 标题 会 显示 带 下 画 线 的 蓝 色 文本 。 


5.2.2” 超 链接 路 径 


在 网 页 设计 中 超 链 接 a 标记 的 href 属性 定义 链接 所 访问 的 目标 地 址 ,也 称 为 访问 路 径 。 
每 一 个 网 页 都 有 一 个 相对 固定 的 地 址 ， 即 统一 资源 定位 符 URL， 通 过 独立 的 URL 可 以 访 
问 不 同 网 站 上 的 不 同 的 页 面 。 在 HTML 文件 中 提供 了 三 种 路 径 ， 分 别 是 绝对 路 径 、 相 对 路 
径 、 根 路 径 。 

1. 绝对 路 径 

绝对 路 径 指 文件 的 完整 路 径 ， 包 括 盘 符 或 文件 传输 的 协议 http、fpp 等 ， 一 般 用 于 网 站 
的 外 部 链接 。 绝 对 路 径 有 两 种 : 一 种 是 从 盘 符 开始 定义 的 文件 路 径 ， 如 E:\web\index.html; 
一 种 是 从 协议 开始 定义 的 URL 网址， 例如 中 国教 育 与 科研 计算 机 网 的 网 址 http://www.edu.cn。 

2. 相对 路 径 

相对 路 径 是 指 相对 于 当前 文件 的 路 径 ， 从 当前 文件 所 在 位 置 指向 目的 文件 的 路 径 。 采 
用 相对 路 径 是 建立 两 个 文件 之 间 的 相互 关系 ， 相 对 路 径 一 般 用 于 网 站 内 部 链接 。 相 对 位 置 
的 输入 方法 如 表 5-2 所 示 。 


表 5-2 ”相对 位 置 的 输入 方法 


相对 位 置 代码 示例 
同一 目录 <a hre 人 "tongzhihtml"> 通 知 </a> 
链接 上 一 目录 <a hre 全 "index html"> 首 页 </a> 
链接 下 一 目录 先 输入 目录 名 ， 后 加 “/” <a href="ks/note.html"> 考 试 通知 </a> 





3. 根 路 径 

根 路 径 是 指 从 网 站 的 最 底层 开始 起 ， 一 般 网 站 的 根 目 录 就 是 域名 下 对 应 的 文件 夹 ， 例 
如 EE 盘 上 存放 一 个 网 站 , 双击 EE 盘 进 入 到 EE 盘 看 到 的 就 是 网 站 的 根 目录 , 这 种 路 径 就 称 为 
根 路 径 ， 所 以 根 路 径 以 斜 杠 /开头 ， 然 后 书写 文件 夹 名 ， 接 着 书写 子 文件 夹 名 或 文件 名 ， 以 
此 类 推 ， 直 到 写 完 路 径 为 止 。 如 : /web/news/show.html。 根 目录 需要 带 盘 符 时 ， 采 用 格式 
为 E: /web/news/show.html， 这 表示 E 盘 下 web/news 下 的 show.html。 这 种 写法 在 Google 
的 Chrome、Firefox 等 浏览 器 能 够 支持 。 不 过 正 浏览 器 、360 安全 浏览 器 不 支持 这 种 写法 ， 
正确 写法 如 下 所 示 : 


<a href="d:/web/news/show.html"> 显 示 信息 </a> 


根 路 径 一 般 用 于 创建 内 部 链接 。 通 常 不 建议 采用 此 种 链接 形式 。 

根 目录 路 径 和 相对 路 径 都 是 以 某 个 位 置 为 起 点 的 相对 路 径 ， 但 是 根 目录 路 径 一 般 用 于 
有 多 台 服 务 器 的 大 型 网 站 ， 建 议 对 路 径 的 概念 不 大 熟悉 的 初学 者 在 做 链接 时 还 是 采用 相对 
路 径 为 宜 。 另 外 ， 为 了 避免 链接 错误 的 出 现 ， 不 管 使 用 何 种 类 型 的 链接 ， 站 点 的 建立 是 必 
要 的 。 





第 
5 
章 


赴 颖 授与 浮动 族 奖 


Web 所 详 开 和 八 龙 天 一 一 HTML5、CSS3、JavaScript ( 菇 3 版) 






5.2.3 ” 超 链接 分 类 


在 HTML 文件 中 , 超 链 接 可 以 分 为 内 部 链接 和 外 部 链接 两 种 。 内 部 链接 是 指 网 站 内 部 
文件 之 间 的 链接 , 而 外 部 链接 是 指 网 站 内 的 文件 链接 到 站 点 内 容 外 的 文件 。 将 URL 设置 为 
相对 路 径 为 内 部 链接 ， 而 将 URL 设置 为 文件 的 绝对 路 径 则 为 外 部 链接 。 

【 例 $-2-2】 内 部 链接 和 外 部 链接 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 5-3 所 示 。 


1 <!-- edu 5 2 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

与 <meta charset="UTF-8"> 

6 <title> 内 部 链接 和 外 部 链接 </title> 

7 </head> 

8 <body> 

9 <h2> 内 部 链接 : </h2> 

10 <p><a href="index.html"> 通 知 </a> 指 向 网 站 内 的 页 面 链接 </p> 
于 <h2> 外 部 链接 : </h2> 

过 <p><a href="http://www.163.com/"> 网 易 </a> 指 向 网 站 外 的 页 面 链 接 </p> 
13 </body> 

14 </html> 








通知 指向 网 站 内 的 页 面 链接 
外 部 链接 : 
园 显 指向 网 站 外 的 页 面 链 接 











5-3 ”内 部 链接 和 外 部 链接 的 应 用 
代码 中 第 10 行 定义 访问 当前 目录 下 index html 的 内 部 链接 ， 第 12 行 定义 访问 网 易 网 
站 的 外 部 链接 。 
5.3 ” 超 链 接 的 应 用 
在 网 络 上 能 够 通过 链接 ， 访 问 不 同 的 资源 或 网 页 。 链 接 对 象 也 是 多 种 多 样 ， 可 分 为 文 
件 、FTP 站 点 、 图 像 、 电 子 邮件 及 书签 等 。 
S.3.1 创建 HTTP 文件 下 载 超 链接 


网 站 经 常 提供 软件 、 文 件 等 资料 下 载 ， 下 载 文件 的 链接 指向 文件 所 在 的 相对 路 径 或 绝 
对 路 径 ， 文 件 类 型 为 x.doc、*.pdf、*.exe、*.rar 等 。 基 本 语法 如 下 : 


<a href="url"> 链 接 内 容 </a> 
5.3.2 ”创建 FTP 站 点 访问 超 链接 
FTP 服务 器 链接 和 网 页 链接 区 别 在 于 所 用 协议 不 同 ， 浏 览 网 页 采用 http 协议 ， 而 访问 


FTP 服务 器 采用 FTP 协议 连接 .FTP 需要 从 服务 器 管理 员 处 获得 登录 的 权限 .不 过 部 分 FTP 
服务 器 可 以 匿名 访问 ， 从 而 能 获得 一 些 公开 的 文件 。 基 本 语法 如 下 : 


<a href = "ftp:// 服 务 器 IP 地 址 或 域名 "> 链接 的 文字 </a> 
5.3.3 ”创建 图 像 超 链接 

将 链接 标题 蔡 换 为 一 幅 图 像 ， 浏 览 时 单 击 该 图 像 ， 就 可 以 打开 和 链接 目标 文件 。 基 本 语 
法 如 下 : 


<a href="URL"><img src="" alt=""></a> 
使 用 <img> 标 记 人 替代 原来 超 链接 的 标题 ， 即 可 实现 图 像 链接 。 
5S.3.4 创建 电子 邮件 超 链接 


一 般 网 站 上 都 会 设置 “联系 我 们 ”这 样 的 栏目 或 超 链接 ， 目 的 是 方便 用 户 及 时 与 网 站 
管理 员 进 行 沟通 与 联系 ， 这 就 是 常 说 的 电子 邮件 链接 。 基 本 语法 如 下 : 


<a href="mailto:E-mail 地 址 [ ?subject= 邮 件 主 题 [& 参 数 = 参数 值 ] ] "> 链接 内 容 </a> 


邮件 地 址 必须 完整 ， 例 如 intel@qq.com。 参 数 有 cc 〈 抄 送 )、bcc〈 密 送 )、subject ( 主 
题 )、body。 多 个 收 件 人 用 分 号 “; ”分 隔 ， 多 个 参数 用 “&” 连 接 ,“&” 与 关键 字 之 间 不 
能 留 有 空格 ， 空 格 用 “%20” 替 代 。 

举例 如 下 : 


<a href="mailto:some@mysoft .com;jlchu@163.com?cc=xyz@163.com 
&bcc=anbo@sina.com&subject=Hello%$20againgbody= 下 周二 开会 讨论 "> 发 送 邮 件 </a> 


【 例 5-3-1】 超 链接 的 综合 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 5-4 一 图 5-8 所 示 。 


1 <!-- edu 5 3 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 超 链接 的 应 用 </title> 
. <style type="text/css"> 
8 hl{background:#9999cc;color:white;padding:10px;height:50px; 
text-align:center;} 
9 img{width:70px;height:45px;} 
10 </style> 
11 </head> 
12 <body> 
ta <h1> 超 链接 的 应 用 </h1> 
14 <h3><a href="ch5.ppt">1.HTTP 下 载 -文件 ch5.ppt</a></h3> 
15 <h3><a href="ftp:// ftp.pku.edu.cn">2.FTP 下 载 - 北 京 大 学 FTP 站 点 </a> 
</h3> 
16 <h3>3 .图 像 超 链接 
17 <a href="https://www.baidu.com//"> 
18 <img border="0" src="bd logol.png" /> 
19 </a></h3> 
20 <h3>4 . 邮件 超 链接 -有 问题 可 以 给 我 
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21 <a href="mailto:someone@microsoft.com;xyz@163.com?cc=jlchu@163. 
comgbcc=12345678@qq.com&subject=Hello%20againgbody= 下 午 14:20 开 
会 "> 发 送 邮 件 </a></h3> 

22 <p> 应 该 使 用 $20 来 蔡 换 单词 之 间 的 空格 , 这 样 浏览 器 就 可 以 正确 地 显示 文本 了 。</p> 

Ek </body> 

24 </html> 


代码 解释 

代码 中 第 14 行 定义 ch5.ppt 文件 的 HTTP 下 载 链接 ， 单 击 超 链接 进入 文件 下 载 页 面 ， 
如 图 5-5 所 示 。 第 15 行 定义 访问 北京 大 学 FTP 站 点 的 FTP 下 载 链接 , 单 击 超 链 接 进 入 FTP 
站 点 下 载 文件 页 面 ， 如 图 5-6 所 示 。 第 16 一 19 行 定 义 图 像 超 链接 ， 单 击 图 像 超 链接 进入 百 
度 搜索 页 面 ， 如 图 5-7 所 示 。 第 20 一 21 行 定义 邮件 超 链 接 ， 单 击 邮件 超 链 接 进 入 邮件 设置 
页 面 ， 如 图 5-8 所 示 。 


超 链接 的 应 用 i 


2 FTP 站 点 


、 图像 直 名 接 Bane 
+ 郑 件 超 链接 有 问题 可 以 给 我 发 关节 人 
应 汇 使 用 %20 未 答 权 单 酒 之 闻 的 定 榜 ， 这 样 浏览 关 就 可 以 正确 好 县 示 文本 了 。 












| em chS ppt htt MF? 
AN 

2 Mraeh 
i ranene 























» FO) 录 Linuz 
riengmarn 蜂 lost+found 


录 ant 
怒 法 。 


51 velcone. nsg 


























图 5-5 HTTP 下 载 链接 图 5-6 FTP 下载 链接 
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图 5-7 图 像 超 链 接 图 5-8 邮件 超 链接 


5.3.5 创建 页 面 书签 链接 


书签 是 指 到 文章 内 部 的 链接 ， 可 以 实现 段落 间 的 任意 跳 转 。 实 现 这 样 的 链接 要 先 定义 
一 个 书签 作为 目标 端点 ， 再 定义 到 书签 的 链接 。 链 接 到 书签 分 为 两 种 : 链接 到 同一 页 面 中 
的 书签 和 链接 到 不 同 页 面 中 的 书签 。 

1. 定义 书签 

通过 设置 超 链接 a 标记 的 name 属性 来 定义 书签 。 

<a name=" 书 签名 "> 书签 标题 </a> 


name 属性 的 值 是 定义 书签 的 名 称 ， 供 书签 链接 引用 的 。 超 链接 <a></a> 之 间 的 信息 为 
书签 的 标题 。 

2. 定义 书签 链接 

通过 设置 超 链接 a 标记 的 href 属性 来 定义 书签 链接 。 

1) 基本 语法 


<a href="# 书 签名 "> 书签 标题 </a> <!-- 同一 页 面 内 ”--> 
<a href="URL# 书 签名 "> 书签 标题 </a> <!-- 不 同 页 面 间 --> 


第 一 种 是 对 于 同一 页 面 内 的 书签 , 第 二 种 是 不 同 页 面 间 的 书签 , 其 中 URL 设置 HTML 
文件 名 称 ,“# 书 签名 ”表示 引用 名 称 为 “书签 名 ”的 书签 。 
【 例 5-3-2】 书签 链接 的 应 用 。 编 写 edu_5 3_2.html 和 edu 5 3 2_1.html， Wy 
示 ， 页 面 效果 如 图 5-9 和 图 5-10 所 示 。 
1 <!-- edu 5 3 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 








4 <head> 

- <meta charset="UTF-8"> 

6 <title> 链 接 到 同一 页 面 的 书签 </title> 

7 </head> 

8 <body> 

9 <h3><a name="software"> 主 流 的 网 页 设计 软件 </a></h3> 

10 <ul> 

和 <li><a href="#dw">Dreamweaver MX[ 同 页 ]</a></1i> 

Ey <li><a href="#fl">Flash MX[ 同 页 ]</a></1i> 

13 <1i><a href="#fw">Fireworks MX[ 同 页 ]</a></1i> 

14 <li><a href="edu 5 3 2 1.html#EditPlus">EditPlus[ 异 页 ]</a> 

</1i> 

了 </ul> 

16 <h2><a name="dw">Dreamweaver MX</a></h2> 

生子 <p>gnbsp; &nbsp; gnbsp; &nbsp; Dreamweaver 是 美国 Macromedia 公 司 ( 现 已 被 
Adobe 公 司 收购 ， 成 为 Adobe Dreamweaver) 开发 的 集 网 页 制作 和 管理 网 站 于 一 身 
的 所 见 即 所 得 网 页 编辑 器 , 它 是 第 一 套 针对 专业 网 页 设计 师 特 别 发 展 的 视觉 化 网 页 开发 
工具 ， 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 跨越 浏览 器 限制 的 充满 动感 的 网 
页 。</p> 

18 <h4 align="right"><a href="#software"> 返 回 </a></h4> 
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19 <h2><a name="fl">Flash MX</a></h2> 

20 <p>&gnbsp; gnbsp; gnbsp; gnbsp; Flash 是 美国 Macromedia 公 司 所 设计 的 二 维 动 
画 软 件 ， 全 称 Macromedia Flash (被 Adobe 公 司 收购 后 称 为 Adobe Flash) ， 主 
要 用 于 设计 和 编辑 Flash 文 档 。 附 带 的 Macromedia Flash Player, 用 于 播放 Flash 


文档 。 

21 现在 ，Flash 已 经 被 Mdobe 公 司 购买 ， 最 新 版 本 为 : Adobe Flash CS6 Professional， 
播放 器 也 更 名 为 Adobe Flash Player。</p> 

22 <h4 align="right"><a href="#software"> 返 回 </a></h4> 

23 <h2><a name="fw">Fireworks MX</a></h2> 

24 <p>gnbsp; gnbsp; gnbsp; &nbsp; Adobe Fireworks 可 以 加 速 Web 设计 与 开发 ， 


是 一 款 创建 与 优化 Web 图 像 和 快速 构建 网 站 与 Web 界面 原型 的 理想 工具 。Fireworks 
不 仅 具 备 编辑 矢量 图 形 与 位 图 图 像 的 灵活 性 , 还 提供 了 一 个 预先 构建 资源 的 公用 库 ， 并 
可 与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver 和 Adobe 
Flash 软 件 进行 集成 ,在 Fireworks 中 将 设计 迅速 转变 为 模型 , 或 利用 来 自 Illustrator、 
Photoshop 和 Flash 的 其 他 资源 。 然 后 直接 置 入 Dreamweaver 中 轻松 地 进行 开发 


与 部 署 。</p> 
2 <h4 align="right"><a href="#software"> 返 回 </a></h4> 
26 </body> 
27 </html> 


: BE 证 | ”~ 一 一 。 前 三 个 是 同 页 面 书签 链 按 ， 
El 恒 丰 1 
不 同 页 面 书签 链接 。 


Flash MX 


司 所 设计 的 二 维 动画 软件 ， 全 称 Macromedia Flash 【被 Adobe 公 司 收购 后 称 为 Adobe Fwb) ， 主 要 用 于 设 
附 蔡 的 Macromeda Flash Puyer， 用 二 播放 Fu 文档。 现在 ，Fleh 已 经 被 Adobe 公 司 购买 ， 录 新 版 本 力 ，Adobe 
CS6 Prctenioaal 播放 器 忆 更 名 为 Adobe Flash Ptayer， 


Fireworks MX 


ieworks 避 以 加 加 Web 设计 与 开发 ， 是 一 款 创 建 与 伐 化 Web 丁当 和 快速 伯 建 网 站 与 Web 界面 原型 的 理想 工具 . 
tL a 还 提供 了 一 个 预先 构建 帝 短 的 公用 库 ， 并 可 与 Adobe Pbotoshop、Adobe 

Adobe DreamweaverfaAdobe Flash 软 件 详 行 集成 。 在 Teewodcs 中 等 设计 坊 亿 转 构 为 模型 ， 芝 利用 来 自 Damsator、Pbotosbop 
bp Fl 的 其 它 沉 源 。 然 后 直 按 置信 Dremweaver 中 轻松 地 进行 开发 与 部 矢 。 








EdaPyex 久 定编 独 加 2 1 壬 功能 强大 ， 文 二 编辑 器 eh 四 英文 掺 宰 愉 责 、 自 动 

a 基调 本 再 它 至 有 一 个 好 用 的 1 杭 可 巾 杨 的 功能 ， 芒 欠 
同步 于 而 由 板 自动 文字 相 直 坦 Edspw 的 从 和 涂 口中 ， 让 你 涯 译 检 央 的 步 要 。 Et HTML 护 氏 基 ， 它 陈 
了 支持 糊 色 标记 、HTML 标记 .同时 支持 C、C++、 Pat、Jara。 另外 ， 志 还 内 建 充 束 的 HTML CSS1 指 信 功能 ， 对 于 习 民用 记事 
本 护 加 网 页 的 朋友 ， 它 可 芭 你 节省 一 半 以 上 的 网 页 制作 时 间 . 若 你 有 安装 瑟 30 以 上 版 本 ， 它 还 会 拓 合 下 测 贡 天 于 Edepus 谷口 
中 ， 让 你 可 以 直 樟 巴 页 编辑 好 的 网 页 (车 流 雪 甘于 ， 人 也 可 换 定 到 砚 基 路 和 )- 


让 同 首页 - 





5-10 不 同 页 面 间 书 签 链接 


2) 代码 解释 

代码 中 第 9 行 定义 根 书签 名 称 为 "software"， 供 所 有 的 “返回 ”书签 链接 引用 ; 第 10~ 
15 行 利用 无 序列 表 定 义 四 个 书签 链接 ， 其 中 前 三 个 为 同 页 面 书签 链接 ， 最 后 一 个 为 不 同 页 
面 的 书签 链接 ， 跳 转 到 edu 5 3 2 1.html 页 面 上 访问 书签 EditPlus; 第 16 行 、 第 19 行 、 
第 23 行 定义 三 个 书签 分 别 为 "dw"、"f"、"fw"， 供 第 11 行 、 第 12 行 、 第 13 行 的 定义 的 书 
签 链接 引用 ; 第 18 行 、 第 22 行 、 第 25 行 定义 “返回 ”书签 链接 ， 返 回 根 书 签 所 在 位 置 。 
单 击 图 5-9 中 的 “EditPlus[ 异 页 ] ”访问 edu_ 5 3 2_1.html 页 面 上 的 EditPlus 书签 , 如 图 5-10 
所 示 。 

让 二 = ed 5 32 1.htnl ==> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

与 <meta charset="UTF-8"> 

6 <title> 不 同 页 面 之 间 的 书签 链接 </title> 

7 </head> 

8 <body> 

9 <h4><a name="EditPlus">EditPlus</a></h4> 

10 <p>gnbsp; gnbsp; &nbsp; gnbsp; EditPlus (文字 编辑 器 ) 汉化 版 一 套 功 能 强大 ， 
可 取代 记事 本 的 文字 编辑 器 ，EditPlus 拥 有 无 限制 的 撤销 与 重 做 、 英 文 拼 字 检查 、 自 
动 换行 、 列 数 标记 、 搜 寻 取 代 、 同 时 编辑 多 文件 、 全 屏幕 浏览 功能 。 而 它 还 有 一 个 好 用 
的 功能 , 就 是 它 有 监视 剪贴 板 的 功能 , 能 够 同步 于 剪贴 板 自动 将 文字 粘贴 进 EditPlus 
的 编辑 窗口 中 ， 让 你 省 去 粘贴 的 步骤 。 另 外 它 也 是 一 个 非常 好 用 的 HTML 编辑 器 ， 它 
除了 支持 颜色 标记 、HTML 标记 ， 同 时 支持 C、C++、Perl、Java， 另 外 ， 它 还 内 建 
完整 的 HTML & CSS1 指令 功能 ， 对 于 习惯 用 记事 本 编辑 网 页 的 朋友 ， 它 可 帮 你 节省 一 
半 以 上 的 网 页 制作 时 间 ， 若 你 有 安装 ITE 3.0 以 上 版 本 ， 它 还 会 结合 IE 浏览 器 于 
EditPlus 窗口 中 , 让 你 可 以 直接 预览 编辑 好 的 网 页 ( 若 没 安装 IE, 也 可 指定 浏览 器 路 径 ) 。 

11 </p> 

12 <h4 align="right"><a href=" edu 5 3 2.html#software"> 返 回首 页 
</a></h4> 

3 </body> 

14 </html> 


上 述 代 码 中 第 9 行 在 标题 字 h4 标记 内 定义 书签 名 称 为 "EditPlus", 作 为 edu_5_3_2.html 
页 面 的 书签 链接 的 目标 。 第 12 行 定 义 返回 edu_5_3_2.html 页 面 的 书签 链接 ， 单 击 “ 返 回 


首页 ”返回 edu_ 5 3 _2.html 页 面 ， 如 图 5-9 所 示 。 
5.4 浮动 框架 


浏览 器 窗口 含有 孤立 的 子 窗口 称 为 浮动 框架 ， 也 称 为 内 联 框 架 。 在 浏览 器 窗口 中 嵌入 
浮动 框架 可 使 用 过 ame 标记 ， 该 标记 为 成 对 标记 ， 必 须 插入 在 body 标记 中 ， 而 不 能 插入 
到 frameset 标记 中 。 

1， 基本 语法 


<iframe 属性 名 称 ="value" name="iframename"></ iframe> 
<a href="target.html" target="iframename " > 链接 标题 </a> 


赴 颖 稻 与 浮动 族 奖 
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2， 语 法 说 明 
属性 名 称 及 相关 说 明 如 表 5-3 所 示 。 
表 5-3 ”浮动 框架 属性 
说 明 属 性 













说 明 














sIC 设置 源 文件 属性 frameborder 设置 框架 边框 
name 设置 框架 名 称 scrolling 设置 框架 滚动 条 
width 设置 浮动 框架 窗口 宽度 marginwidth 设置 框架 左右 边 距 











设置 浮动 框架 窗口 高 度 marginheight 设置 框架 上 下 边 距 





【 例 5-4-1】 应 用 浮动 框架 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 5-11 和 图 5-12 所 示 。 


1 <!-- edu 5 4 1.html --> 回 a] 
2 <!doctype html> S 3 2 
3 <html lang="en"> es 

4 <head> 回 ， 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 浮 动 框架 应 用 </title> 

7 <style type="text/css"> 

8 a{width:300px;margin:0 10px;} 

9 h3{font-size:28px;color:#0000ff;text-align:center;} 

10 div{margin:0 auto;text-align:center;} 

41 </style> 


12 </head> 
13 <body> 


14 <div id="" class=""> 
i <h3> 浮 动 框架 应 用 </h3> 
16 <hr color="red"> 
EW <iframe name="leftiframe" src="http://www.njust.edu.cn" 
width="300" height="300" ></iframe> 
18 &nbsp; gnbsp; 
19 <iframe name="rightiframe" src="http://www.pku.edu.cn" 
width="300" height="300" marginwidth="10px"></iframe> 
20 <p> 
21 <a href="http://www.gov.cn" target="leftiframe"> 在 左边 浮动 
框架 内 显示 中 央 人 民政 府 网 站 </a> 
22 <a href="http://www.moe.gov.cn/" target="rightiframe"> 在 
右边 浮动 框架 内 显示 教育 部 网 站 </a> 
23 </p> 
24 </div> 
25 </body> 
26 </html> 
3， 代 码 解 释 


代码 中 第 17 行 在 div 标记 中 插入 一 个 名 称 为 leftiframe 的 浮动 框架 ， 并 为 该 框架 设置 
了 内 部 显示 的 网 页 、 宽 度 、 高 度 ; 第 19 行 在 div 标记 中 插入 一 个 名 称 为 rightiframe 的 浮动 
框架 ， 并 为 该 框架 设置 了 内 部 显示 的 网 页 、 宽 度 、 高 度 、 框 架 的 左右 边 距 等 属性 ; 第 21 
行 、 第 22 行将 浮动 框架 leftiframe、rigtiframe 设置 为 超 链接 的 链接 目标 。 单 击 超 链接 在 左 、 
右 浮动 框架 中 分 别 显示 不 同 的 页 面 ， 如 图 5-12 所 示 。 
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图 5-11 在 浮动 框架 内 显示 指定 网 页 的 初始 图 图 5-12 单 击 超 链接 后 页 面 效 果 图 


5.5 综合 实例 





以 “百度 ”首页 为 模板 ， 设 计 百度 仿真 页 面 ， 效 果 如 图 5-13 所 示 。 








辣 FAWeb 前 沪 开 志 -CX 


新 闻 网 页 屿 吧 知道 音乐 图 片 视频 地 图 
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5-13 ”百度 仿真 页 面 


1 <!-- edu 5 5 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 







































4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 百 度 仿真 页 面 </title> 
</head> 
8 <body> 
9 <p align="center"><a href="http://www.baidu.com"> 
10 <img border="0" src="baidu sylogol.gif" /></a></p> 
11 <p align="center"> 
12 <a href="http://news.baidu.com" name="tj news"> 新 snbsp; 闻 </a> 
3 <b> 网 &nbsp; 页 </b> 
14 <a href="http://tieba.baidu.com" name="tj tieba"> 贴 :nbsp; 吧 </a> 
5 <a href="http://zhidao.baidu.com" name="tj zhidao"> 知 gnbsp; 
道 </a> 
16 <a href="http://music.baidu.com" nam "tj _mp3"> 音 gnbsp; 乐 </a> 
<a href="http://image.baidu.com" nam tj img"> 图 gnbsp; 片 </a> 
18 <a href="http://video.baidu.com" name="tj video"> 视 snbsp; 频 </a> 
19 <a href="http://map.baidu.com" name="tj map"> 地 gnbsp; 图 </a> 第 
20 </p> 5 
章 
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21 <p align="center"> 

22 <input type="text" size="60" name=""> 

23 <input type="button" name="baidu"” value=" 百 度 一 下 "> 

24 </p> 

25 <p align="center"> 问 题 反馈 请 <a href="mailto:someone@baidu.com? 


subject= 问 题 反 馈 "> 发 送 邮 件 </a></p> 
26 </body> 
27 </html> 
上 述 代码 中 第 9 一 10 行 实现 百度 图 片 链接 ;第 11 一 20 行 在 段落 p 标记 插入 七 个 文字 超 
链接 ; 第 21 一 24 行 在 段落 p 标记 内 分 别 插入 文本 输入 框 和 普通 按钮 , 用 于 仿真 百度 首页 的 
搜索 功能 ， 第 22 行 定义 文本 输入 框 长 度 为 60 个 字符 ， 第 23 行 定义 一 个 普通 按钮 ， 第 25 
行 实现 电子 邮件 的 链接 。 


本 章 小 结 


本 章 主要 学 习 了 超 链 接 和 浮动 框架 的 知识 。 重 点 介绍 了 超 链 接 语 法 、 超 链接 中 路 径 以 
及 与 浮动 框架 的 关联 。 区 别 使 用 绝对 路 径 、 相 对 路 径 及 根 路 径 设 置 超 链接 目标 。 理 解 超 链 
接 的 类 型 及 每 种 类 型 适用 场合 ， 其 中 内 部 链接 用 于 网 站 内 部 资源 之 间 的 链接 ， 而 外 部 链接 
用 于 网 站 外 部 的 链接 。 

同时 本 章 还 介绍 了 超 链接 的 不 同 链接 对 象 的 语法 和 使 用 方法 ， 包 括 下 载 文件 链接 、 书 
签 链接 、FTP 链接 、 图 像 链接 、 电 子 邮 件 链接 。 


练习 与 实验 


练习 5 


1. 选择 题 
(1) 下 列 电子 邮件 链接 格式 正确 的 是 
(A) <a href="mailto:xxx.com.cn?subject= 你 好 ! ">...</a> 
(B) <a href="mailto:xxx@.net?subject= 你 好 ! ">...</a> 
(C) <a href="mailto:xxx@com?subject= 你 好 ! ">...</a> 
(D) <a href="mailto:xxx(@xxx.com?subject= 你 好 ! ">...</a> 
(2) 当 链 接 指向 ) 文件 时 ， 不 打开 该 文件 ， 而 是 提供 给 浏览 器 下 载 。 


(A) ASP (B) HIML 《CEZP (D) CGI 
(3) 下 列 选项 中 不 是 超 链接 的 target 属性 取 值 的 是 入 

(A) _self (B) new (C) blank (D) top 
(4) 在 网 页 中 ， 能 够 定义 超 链接 的 标记 是 ( ”)。 

(A) <link>...</link> (B) <hl>...</h1> 

(C) <a>...</a> (D) <ul>...</ul> 


(5) <img> 标 记 中 规定 图 像 URL 的 属性 是 (  )。 
(A) href (B) src (C) type (D) align 


(6) 在 HIML 中 ， 要 定义 一 个 书签 链接 应 该 使 用 的 语句 是 (  )。 
(A) <a href="#bookl1">text</a> (B) <a name="bookl1">text</a> 
(C) <a target="#book1">text</a> (D) <a link="#bookl1">text</a> 
(7) 在 body 中 插入 浮动 框架 正确 语句 是 入 
(A) <body><iframe src="" name="rightframe">...</body> 
(B) <body><iframe src="" name="rightframe"></iframe>...</body> 
(C) <body><frame src="" name="rightframe">...</body> 
(D) <body><frame src="" name="rightframe"></frame>...</body> 
2. 填空 题 
(1) 如 果 要 创建 一 个 指向 电子 邮件 someone@mail.com 的 超 链接 ， 代 码 应 该 如 下 : 
<a > 指向 someone@mail.com 的 超 链接 </a> 
(2) 在 指定 页 内 超 链接 的 时 候 ， 如 果 在 某 一 个 位 置 使 用 了 <a 。 ="target1"> 书 签 
</a> 语 句 定义 了 书签 名 为 target1， 那 么 当 单 击 超 链 接 <a hre 仁 > 书 
签 链接 </a> 时 ， 能 够 跳 转 到 同 页 面 定义 的 书签 targetl 位 置 上 。 
(3) 超 链 接 路 径 分 为 、 、 。 网 站 内 部 链接 一 般 使 用 
_ 路径， 当然 路 径 也 可 以 用 于 内 部 链接 外 部 链接 一 般 使 用 路 径 。 
(4) 浮动 框架 的 name 属性 值 为 "leftframe"， 让 超 链 接 在 此 浮动 框架 中 打开 “中 国教 育 
网 CURL: http:/www.educn)” 网 站 的 正确 的 超 链 接 是 。 
3， 简 答题 
(1) 简 述 什么 是 绝对 路 径 和 相对 路 径 。 
(2) 写 出 制作 页 面 书签 的 步骤 ， 并 举例 说 明 。 
(3) 如 果 想 通过 单 击 不 同 的 超 链接 在 浮动 框架 中 打开 不 同 的 页 面 ， 需 要 如 何 设 置 ? 


实验 5 


1. 根据 提供 的 图 像 和 超 链接 资源 完成 图 像 页 面 导航 设计 ， 资 源 与 对 应 的 超 链接 如 表 
5-4 所 示 , 效果 如 图 5-14 所 示 。 编写 符合 以 下 要 求 的 文档 : 在 HTML 文档 中 插入 一 张 图 片 ， 
为 图 片 加 上 链接 ， 指 向 它 所 在 的 网 站 。 

















表 5-4 图 像 与 超 链接 对 应 关系 表 




























1 ipadblankl.gif http://www.apple.com.cn/iphone/ 
4 ipadblank2.gif http://www.apple.com.cn/iphone/ 
3 ipadblank3.gif http://www.apple.com.cn/macbook-pro/ 
4 ipadblank4.gif http://www.apple.com.cn/supplierresponsibility/ 
We Ee 
pple 网 站 









































图 5-14 图片 超 链接 的 页 面 
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2. 按 如 下 要 求 设计 Web 页 面 ， 如 图 5-15 所 示 。 

(1) 页 面 标题 为 : 桂林 山水 风景 图 片 。 

(2) 正文 标题 为 红色 “桂林 山水 风景 图 片 ” 图片 分 别 为 image51.jpg、image52.jpg、 
image53.jpg、image54.jpg; 采用 无 序列 表 布 局 ， 每 一 个 列表 项 的 内 容 为 图 像 链接 ， 单 击 小 
图 ， 可 以 浏览 大 图 。 

(3) 定义 样式 。img 标记 样式 为 “宽度 100px、 高 度 100px、 边 框 Opx”，h3 标记 样式 
为 “红色 、 居 中 ” dl 样式 为 “去 除 列表 项 前 的 符号 、 内 容 居中 显示 ”1i 样式 为 “显示 方 
式 行内 显示 (display:inline )、 宽 度 120px、 行 高 30px”。 

| 














5-15 ”桂林 山水 风景 


3. 设计 如 图 5-16 所 示 页 面 ， 要 求 如 下 : 

(1) 页 面 标题 为 :“ 浮 动 框架 应 用 ”。 

(2) 页 面 内 容 为 : 一 个 标题 ， 网 页 内 嵌入 两 个 浮动 框架 、 两 个 超 链 接 。 标 题 内 容 : 三 
号 标题 显示 “浮动 框架 中 打开 新 页 面 ”， 两 个 浮动 框架 名 称 分 别 为 left、right， 初 始 网 页 分 
别 为 :http://www.pku.edu.cn 和 http://www.seu.edu.cn; 两 个 超 链接 分 别 在 左 、 右 两 个 浮动 框 
架 中 打开 两 个 网 页 , 分 别 是 https://www.baidu.com、http://www.qq.com, 两 个 超 链接 的 target 
属性 分 别 指向 两 个 浮动 框架 left、right。 


























5-16 浮动 框架 中 打开 新 网 页 





第 6 章 图 像 与 多 媒体 文件 





本 章 学 习 目标 


优秀 的 商用 的 网 站 往往 通过 为 页 面 添加 大 量 的 图 像 、 声 音 、 视 频 、 动 画 等 多 媒体 信息 
来 丰富 网 站 的 内 容 ， 吸 引 更 多 网 络 访问 者 的 关注 。 目 前 大 型 商业 网 站 非常 注重 Web 前端 开 
发 技术 的 研究 ， 通 过 组 合 各 类 前 端 开发 技术 来 改善 用 户 体验 和 增加 用 户 互动 环节 ， 最 大 限 
度 地 获取 商业 利润 。 本 章 重 点 介绍 图 像 、 滚 动 文字 、 音 频 等 多 媒体 文件 在 HIML 文件 的 使 
用 方法 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 掌握 图 像 img 标记 语法 、 属 性 设置 及 图 像 热 区 链接 的 设置 方法 。 

。 掌握 滚动 文字 marquee 标记 语法 及 属性 设置 方法 。 

。 掌握 嵌入 多 媒体 文件 embed 标记 语法 及 属性 设置 方法 。 

。 学 会 采用 超 链 接 插入 动画 、 音 频 和 视频 类 等 多 媒体 文件 。 


6.1 图 像 


图 像 和 多 媒体 文件 是 网 页 中 必 不 可 少 的 元 素 ， 灵 活 地 应 用 这 些 元 素 会 给 网 页 增添 不 少 
色彩 。 而 且 图 像 及 其 多 媒体 文件 的 直观 、 明 了 、 绚 丽 和 美观 等 都 是 文字 无 法 替代 的 。 

在 网 页 上 常见 的 图 像 格式 有 JPG (Joint Photo graphic Experts Group)、GIF (Graphics 
Interchange Format) 和 PNG (Portable Network Graphic Format) 等 。BMP 格式 不 常用 。 

HTML 文件 中 使 用 img 标记 在 网 页 上 插入 图 像 。 设 置 它 的 属性 可 以 控制 图 像 的 路 径 、 
尺寸 和 蔡 换 文字 等 各 种 功能 。 


6.1.1 插入 图 像 


可 以 使 用 HTML 的 img 标记 将 图 像 插 入 到 网 页 中 ， 也 可 以 使 用 CSS 设置 成 某 元 素 的 
背景 图 像 ， 而 根据 图 像 的 格式 不 同 ， 其 适用 的 地 方 也 不 同 。 
1. 基本 语法 


<img src="URL" alt=" 蔡 代 文本 "> 

2. 语法 说 明 

img 标记 是 单 〈 个 ) 标记 ， 图 像样 式 由 img 标记 的 属性 决定 。img 标记 有 两 个 必 选 属 
性 ， 分 别 是 sre、alt， 其 他 属性 为 可 选 属 性 ， 具 体 属性 、 取 值 及 说 明 如 表 6-1 所 示 。 

src 指 “source”。 源 属性 的 值 是 图 像 的 URL 地 址 。 可 以 采用 绝对 路 径 或 相对 路 径 来 
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表示 文件 的 位 置 ， 如 src="d:/web/ch6/imagesl.jpg" 是 采用 绝对 路 径 ， 而 src="imagesl.jpg" 是 
采用 相对 路 径 。 


表 6-1 imsg 标记 属性 名 、 值 及 说 明 表 























属 性 说 明 

alt text 规定 图 像 的 蔡 代 文本 

STC URL 规定 显示 图 像 的 URL 

name text 规定 图 像 的 名 称 

height pixels、% 定义 图 像 的 高 度 

width pixels、% 设置 图 像 的 宽度 

il toplmiddle| bottom | 规定 如 何 根据 周围 的 文本 来 排列 图 像 ， 分 水 平 、 垂 直 两 个 方向 
lleftlcenterlright 

border pixels 定义 图 像 周 围 的 边框 

hspace | pixelks 。 ”| 定义 图 像 左 侧 和 右 侧 的 空白 

vspace |pixels | 定义 图 像 项 部 和 底部 的 空白 

usemap 将 图 像 定义 为 客户 器 端 图 像 映射 


【 例 6-1-1】 在 网 页 中 插入 图 像 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 6-1 所 示 。 


1 <!l== edu 6 1 1.htnl > 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 插入 图 像 </title> 视频 讲解 
7 <style type="text/css"> 

8 body{text-align:center;} 

9 </style> 

10 </head> 

11 <body> 

12 <h2> 网 页 中 插入 图 像 </h2> 

3 <hr color="#66ff33" width="60%"> 
14 <img src="imagesl.jpg" alt=" 机 房 "> 
15 </body> 

16 </html> 

3. 代码 解释 


代码 中 第 12 一 14 行 定义 标题 字 、 水 平分 隔 线 、 图 像 。 其 中 第 14 行 采用 相对 路 径 在 网 

















页 中 插入 图 像 imagesl.jpg， 图 像 格式 为 JPEG。 第 8 行 实现 内 容 全 部 居中 显示 。 
EL > 
| 司 Fwebi 开 B DP- cx] 登基 四 x 呆 





网 页 中 插入 图 像 





图 6-1 插入 图 像 


6.1.2 ”设置 图 像 的 替代 文本 


img 标记 的 alt 属性 用 来 为 图 像 设置 替代 文本 。 蔡 代 文 本 有 两 个 作用 

。 浏览 网 页 时 ， 鼠 标 悬 停 在 图 像 上 ， 鼠 标 旁边 会 出 现 蔡 代 文本 ; 

。 图 像 加 载 失 效 时 ， 在 图 像 的 位 置 上 会 显示 红色 的 “X”， 并 显示 替代 文本 。 
1. 基本 语法 


<img src="”URL " alt=" 蔡 代 文 本 "> 


2. 语法 说 明 
alt 属性 : 蔡 代 文本 既 可 以 是 中 文 也 可 以 是 英文 。 
【 例 6-1-2】 设 置 图 像 的 蔡 代 文本 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 6-2 所 示 。 


1 <!1== edu 6 工 -二 hh 二 二 于 -三 = 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

和 <meta charset="UTF-8"> 

6 <title> 插入 图 像 </title> 
7 <style type="text/css"> 
8 body{text-align:center;} 
9 </style> 

10 </head> 

11 <body> 

3 <h3> 网 页 中 插入 图 像 </h3> 

3 <hr color="#3300ff"> 

14 <img src="imagesl.jpg" alt=" 网 络 机 房 " title=" 网 络 机 房 "> 
15 </body> 

16 </html> 
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网 页 中 播 入 图 像 ] 











这 是 提示 
信息 

















6-2 ”添加 图 像 替 代 文字 


3. 代码 解释 
代码 中 第 14 行 插入 一 幅 图 像 ， 并 设置 alt 属性 值 为 “网 络 机 房 ” 当 图 像 成 功 加 载 时 ， 
会 显示 图 6-2 左 图 效果 ; 当 图 像 加 载 不 成 功 时 ， 会 显示 右 图 的 效果 。 


6.1.3 ”设置 图 像 的 高 度 和 宽度 

img 标记 的 width 和 height 属性 用 来 设置 图 像 的 宽度 和 高 度 。 默 认 情 况 下 ， 网 页 中 的 
图 像 大 小 就 是 由 图 像 原 来 的 宽度 和 高 度 来 决定 。 如 果 不 设置 图 像 的 宽度 和 高 度 ， 图 像 的 大 
小 和 原 图 是 一 样 的 。 

1. 基本 语法 


<img src=" URL " width="value"” height="value"> 
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2. 语法 说 明 

。 图 像 高 度 和 宽度 的 单位 可 以 是 像素 ， 也 可 以 是 百分比 。 

。 在 设置 图 像 的 宽度 和 高 度 的 属性 时 ， 可 以 只 设置 宽度 和 高 度 中 的 其 中 之 一 ， 另 一 个 
属性 将 按 原 图 像 宽 高 等 比例 显示 ; 同时 设置 两 个 属性 时 图 像 会 发 生变 形 。 


6.1.4 ”设置 图 像 的 边框 


默认 的 图 像 是 没有 边框 的 ， 通 过 img 标记 的 border 属性 可 以 为 图 像 设置 边框 的 宽度 。 
但 边框 的 颜色 是 不 可 以 调整 的 ， 当 未 设置 图 像 链接 时 ， 边 框 的 颜色 为 黑色 ， 当 设置 图 像 链 
接 时 ， 边 框 的 颜色 和 链接 文字 颜色 一 致 ， 默 认为 深蓝 色 。 通 过 样式 表 可 修改 边框 的 线 型 、 
宽度 和 颜色 。 

1. 基本 语法 


<img src=" URL " border="value"> 


2. 语法 说 明 
value 为 边框 线 的 宽度 ， 用 数字 表示 ， 单 位 为 像素 。 
【 例 6-1-3】 设 置 图 像 的 高 度 、 宽 度 及 边框 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 6-3 所 示 。 


1 <!-- edu 6 1 3.html --> | 
2 <!doctype html> 回 

3 <html lang="en"> i 

4 <head> 、 

Ss <meta charset="UTF-8"> 视频 讲解 
6 <title> 设置 图 像 宽度 、 高 度 及 边框 </title> 

志 <style type="text/css"> 

8 ul{list-style-type:none; /* 去 除 列表 项 前 的 符号 */} 

9 li{float:left;padding:0 20px; /* 垂直 排列 转变 成 水 平 排列 */} 

10 </style> 


11 </head> 
Ee <body> 


EF <h2 align="center"> 设 置 图 像 宽度 、 高 度 及 边框 </h2> 

14 <hr color="#6600cc"> 

15 <ul> 

16 <li><img src="images1.jpg”alt=" 原 图 "></1i> 

ED <1i><img src="images1.jpg" width="100px"” alt=" 宽 度 为 100px" 
border="5"></1i> 

18 <1i><img src="imagesl.jpg" width="75px" height="50px" alt=" 
宽 75px 高 50 像 素 " border="10"></1i> 

19 </ul> 

20 </body> 

21 </html> 

3. 代码 解释 


代码 中 第 15 一 19 行 在 主体 body 标记 中 插入 一 个 无 序列 表 ， 并 在 无 序列 表 中 利用 列表 
项 插入 三 个 图 像 ， 并 对 图 像 分 “不 设置 高 度 、 宽 度 及 边框 ”“ 只 设置 宽度 和 边框 ”“ 宽 度 、 
高 度 及 边框 同时 设置 ”等 情况 进行 设置 ， 并 通过 替代 文本 显示 。 
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设置 图 像 宽 度 、 高 度 及 边框 
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图 6-3 设置 图 像 宽度 和 高 度 


6.1.5 ”设置 图 像 对 齐 方式 


图 像 和 文字 之 间 的 对 齐 方式 通过 img 标记 中 的 align 属性 来 设置 。 图 像 对 齐 方式 分 水 
平 对 齐 和 垂直 对 齐 方式 两 种 ， 其 中 水 平 对 齐 方式 取 值 有 三 种 : left、center、right， 垂 直 对 
齐 方式 取 值 也 有 三 种 : top、middle、bottom， 表 示 图 像 与 同行 文字 的 相对 位 置 。 

1. 基本 语法 


<img src=" URL " align="value"> 


2. 语法 说 明 
align 属性 的 值 及 其 说 明 如 表 6-2 所 示 。 


表 6-2 align 属性 的 值 及 说 明 表 
取 值 说 明 
top 图 像 的 项 端 和 当前 行 的 文字 顶端 对 齐 ， 当 前 行 高 度 相应 扩大 
middle 图 像 水 平 中 线 和 当前 行 的 文字 中 线 对 齐 ， 当 前 行 高 度 相应 扩大 
bottom 图 像 的 底 端 和 当前 行 的 文字 底 端 对 齐 ， 当 前 行 高 度 相 应 扩大 





























left 图 像 左 对 齐 ， 浮 动 游离 于 文字 之 外 ， 文 字 环绕 图 像 周 围 ， 文 字 行 高 度 没有 任何 变化 
center 图 像 中 线 和 当前 行 的 文字 中 线 对 齐 ， 当 前 行 高 度 相应 扩大 
right 图 像 右 对 齐 ， 浮 动 游离 于 文字 之 外 ， 文 字 环绕 图 像 周 围 ， 文 字 行 高 度 没有 任何 变化 


6.1.6 ”设置 图 像 的 间距 


图 像 img 标记 的 hspace 和 vspace 属性 用 来 控制 图 像 的 水 平 距离 和 垂直 距离 ， 而 且 两 
者 均 是 以 像素 为 单位 。 但 在 编写 代码 时 不 需要 给 属性 值 加 上 单位 px， 否则 不 会 产生 效果 。 

1. 基本 语法 

<img src="URL" hspace=" 水 平 间距 数值 ” vspace=" 垂 直 间 距 数值 "> 

2. 语法 说 明 

hspace 调整 图 像 左右 两 边 的 空白 距离 ，vspace 调整 的 是 图 像 上 下 两 边 的 空白 距离 。 

在 实际 应 用 中 很 少 直 接 使 用 图 像 的 对 齐 属性 和 图 像 的 间距 属性 ， 一 般 都 采用 CSS 蔡 
代 ， 所 以 此 处 不 再 举例 。 


6.1.7 设置 图 像 热 区 链接 
除了 对 整 幅 图 像 设 置 超 链 接 外 ， 还 可 以 将 图 像 划分 为 若干 区 域 ， 这 叫 作 “ 热 区 ” 每 





第 
6 
章 


属 优 与 多 妊 做 区 低 


Web 扎 疯 开发 龙 环 一 PINMT5、CSS3、JavaScripl (第 3 斤 ) 





个 区 域 可 设置 不 同 的 超 链接 。 此 时 ， 包 含 热 区 的 图 像 可 以 称 为 映射 图 像 。 

1. 基本 语法 

<img src=" 图 像 地 址 "” usemap="# 映 射 图 像 名 称 "> 

<map name=" 了 映射 图 像 名 称 "> 

<area shape=" 热 区 形状 "coords=" 热 区 坐标 " href="URL"> 

</map> 

2. 属性 语法 

usemap 属性 将 图 像 定义 为 客户 端 图 像 映 射 。 图 像 映射 指 的 是 带 有 可 单 击 区 域 的 图 像 。 
usemap 属性 与 map 标记 的 name 属性 相关 联 , usemap 属性 的 值 以 “#” 开 始 , 后 面 紧 跟 “ 映 
射 图 像 的 名 称 ” 以 建立 <img> 标 记 与 <map></map> 标 记 之 间 的 关系 。 它 指向 特殊 的 <map> 
区 域 。 用 户 计算 机 上 的 浏览 器 将 把 鼠标 在 图 像 上 单 击 时 的 坐标 转换 成 特定 的 行为 ， 包 括 加 
载 和 显示 另外 一 个 文档 。 

map 标记 是 成 对 标记 。name 属性 映射 图 像 的 名 称 ， 与 img 标记 的 usemap 属性 的 值 
关联 。 

area 标记 是 单个 标记 ， 定 义 图 像 映射 中 的 区 域 。<area> 标记 总 是 嵌 套 在 <map></map> 
标记 中 。 该 标记 有 三 个 属性 , 分 别 是 shape、coords、href。 href 属性 定义 此 区 域 的 目标 URL。 
shape 和 coords 属性 的 取 值 如 表 6-3 所 示 。 


表 6-3 shape 属性 与 coords 属性 值 对 应 关系 及 说 明 





shape 值 说 明 
tect | 算 形 区 域 代表 矩形 两 个 项 点 坐标 


crole ”| 画 形 区 代表 国 心 和 于 和 


ep i 顶点 坐标 ( 首 、 标 相 同 ， 形 
poly 区 域 ‖ xlyl.x2.y2,.xiyi .xnynxl.y1 0 首 、 尾 坐标 相同 ， 形 








【 例 6-1-4】 图 像 热 区 链接 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 6-4 所 示 。 


1 <t=- edu 6 1 4.html ==> 
2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 图 像 热 区 链接 </title> 
计 </head> 
8 

9 

0 





<body> 

<p> 
<a><img src="tu.jpg" align="bottom" width="200" height="150" 
border="3" alt=" 美 女 " usemap="#girl"></a> 


11 <map name="girl"> 

12 <area shape="circle" href="http://www.baidu.com" coords= 
"50,50, 30" alt=" 百 度 "> 

和 </map> 

14 </p> 

15 </body> 


16 </html> 





1 单 击 圆 形 图 像 热 区 2. 进 入 百度 页 面 
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图 6-4 图 像 热 区 链接 


3. 代码 解释 

代码 中 第 10 行 定 义 图 像 链 接 ， 并 在 img 标记 中 设置 usemap 属性 引用 图 像 热 区 girl 
第 11 一 13 行 定义 图 像 映射 map， 第 12 行 定义 半径 为 30px、 圆 心 坐标 为 《50px，50px) 的 
圆 形 热 区 ， 设 置 了 热 区 超 链接 ， 鼠 标 指向 热 区 时 会 显示 “百度 ”提示 信息 ， 单 击 热 区 时 会 
访问 百度 页 面 。 


6.2 滚动 文字 


要 设计 一 个 更 加 生动 的 网 站 ， 还 需要 在 网 页 中 添加 多 媒体 元 素 。 多 媒体 元 素 可 以 更 好 
地 体现 设计 者 的 个 性 ， 通 常 滚动 文字 可 以 增加 文字 的 动态 效果 。 
6.2.1 ”添加 滚动 文字 


通过 marquee 标记 可 以 添加 滚动 文字 《内容 )， 增 加 动态 效果 ， 丰 富 网 页 的 内 容 。 


1. 基本 语法 

<marquee width="" height="" bgcolor="" direction="upldown1left1right" 
behavior="scrolllslidelalternate" hspace="" Vspace="" scrollamount="" 
scrolldelay="" loop="" onmouseover="this.stop()" onMouseOut="this.start()"> 
滚动 内 容 </marduee> 


2. 语法 说 明 

marquee 标记 是 成 对 标记 ， 以 <marquee> 开 始 ， 以 </marquee> 结 束 ， 将 需要 滚动 的 内 容 
放 到 marquee 标记 之 间 ， 同 时 也 可 以 设置 滚动 内 容 的 样式 。 

marquee 标记 中 onMouseOver="this.stop0" 属 性 值 对 的 作用 是 当 光 标 移 动 到 滚动 文字 区 
域 时， 滚动 内 容 将 暂停 滚动 onMouseOut-"this.start0" 属 性 值 对 的 作用 是 当 鼠 标 移出 滚动 
文字 区 域 时 ， 滚 动 内 容 将 继续 滚动 。 

【 例 6-2-1】 添 加 滚动 文字 。 代 码 如 下 所 示 ， 页 面 效果 如 图 6-5 所 示 。 





<l== edu 6 2 1.htal =-> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 添加 滚动 文字 </title> 
<style type="text/css"> 
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8 h4{font-size:20px;color:#33cc33;font-family: 素 书 ;} 
9 </style> 

10 </head> 

11 <body> 

12 <h3 align="center"> 添 加 滚动 文字 </h3> 

13 <hr color="#000066"> 

14 <marquee><h4> 该 文字 为 滚动 效果 </h4></marquee> 

15 </body> 

16 </html> 








添加 滚动 文字 





该 文字 为 流动 效果 








夸 100% ~ 








图 6-5 添加 滚动 文字 


3. 代码 解释 
代码 中 第 14 行 定义 了 滚动 文字 ， 文 字 的 字体 为 隶书 、 字 号 为 20px、 颜 色 为 #33cc33， 
滚动 效果 为 默认 方式 ， 即 从 右 向 左 单 向 滚动 。 


6.2.2 ”设置 滚动 文字 背景 颜色 与 滚动 循环 


为 了 能 够 突出 显示 滚动 的 文字 内 容 ， 可 以 通过 bgcolor 属性 为 滚动 文字 添加 背景 颜色 ， 
这 样 在 网 页 中 就 会 更 加 明显 。 同 时 也 可 以 设置 滚动 的 次 数 。 
1. 基本 语法 


<marquee bgcolor="" loop="5" > 滚动 内 容 </marquee> 


2. 语法 说 明 

文字 背景 颜色 采用 多 种 方法 ， 最 常用 的 设置 方法 是 十 六 进 制 和 rgb0 函 数 。 

默认 情况 下 ， 滚 动 文字 将 会 不 停 地 循环 滚动 ,但 使 用 loop 属性 就 可 以 设置 滚动 文字 的 
滚动 循环 次 数 。 循 环 次 数 直 接 使 用 数字 表示 。 一 般 为 整数 ，-1 表示 无 限 循环 。 
6.2.3 ”设置 滚动 方向 与 滚动 方式 

在 没有 设 定 文字 的 滚动 方向 时 ， 通 常 默 认 以 从 右 到 左 的 顺序 滚动 。 在 很 多 情况 下 ， 滚 
动 文字 可 能 需要 从 其 他 方向 开始 滚动 ， 可 以 用 direction 属性 进行 设置 。 滚 动 文字 的 方向 确 
定 了 以 后 ， 滚 动 文字 就 会 一 直 滚动 下 去 ， 如 需要 停止 ， 则 需要 设置 behavior 属性 来 实现 不 
同 的 滚动 方式 ， 如 滚动 一 次 就 停止 、 交 蔡 滚 动 、 循 环 滚动 等 。 

1. 基本 语法 

<marquee direction=" 滚 动 方向 "behavior=" 滚 动 方式 "> 滚动 内 容 </marquee> 

2. 语法 说 明 

direction 属性 决定 滚动 方向 ， 其 取 值 及 说 明 如 表 6-4 所 示 。 


表 6-4 direction 属性 取 值 及 说 明 

















direction 属性 值 direction 属性 值 
up 向 左 滚动 ， 默 认 值 
down Tight 向 右 滚动 





behavior 属性 用 来 设置 滚动 方式 ， 具 体 取 值 及 说 明 如 表 6-5 所 示 。 
表 6-5 behavior 的 属性 取 值 及 说 明 








behavior 取 值 说 明 
scroll 循环 往复 滚动 ， 为 默认 值 
slide 滚动 一 次 就 停止 
alternate 来 回 交替 滚动 





6.2.4 ”设置 滚动 速度 与 滚动 延迟 


设置 滚动 文字 后 ， 可 能 会 考虑 到 滚动 的 快慢 问题 ， scrollamount 属性 可 以 设置 滚动 文 
字 速 度 。 滚动 延迟 就 是 滚动 文字 的 暂停 ,使 用 scrolldelay 属性 来 设置 滚动 文字 的 延迟 时 间 。 

1. 基本 语法 

<marquee scrollamount=" 滚 动 速度 " scrolldelay=" 延 迟 时 间 " > 滚动 内 容 </marquee> 

2. 语法 说 明 

滚动 速度 实际 上 就 是 滚动 文字 每 次 移动 的 长 度 ， 这 个 长 度 用 数字 表示 ， 单 位 为 像素 。 

延迟 时 间 以 毫秒 为 单位 ， 其 值 设 置 得 越 小 滚动 速度 越 快 。 
6.2.5 ”设置 滚动 范围 与 滚动 空白 空间 

设置 滚动 范围 就 是 设置 滚动 的 背景 面积 范围 ， 在 默认 情况 下 是 和 文字 等 高 、 浏 览 器 等 
宽 的 一 个 颜色 带 。 该 面积 可 以 通过 width 和 height 属性 来 控制 。 

设置 滚动 空白 空间 就 是 指 滚动 文字 背景 和 它 周围 的 文字 及 图 像 之 间 的 空白 空间 范围 。 
默认 情况 下 ， 滚 动 对 象 周围 的 文字 或 图 像 是 与 滚动 背景 紧密 连接 的 ， 使 用 hspace 和 vspace 


可 以 设置 它们 之 间 的 空白 空间 。 
1. 基本 语法 
<marquee width=""” height="" hspace="" vspace="" > 滚动 内 容 </mardquee> 


2. 语法 说 明 

宽度 值 和 高 度 值 均 用 数字 表示 ， 单 位 为 像素 。 

hspace、vspace 属性 值 是 整数 ， 单 位 为 像素 。 

【 例 6-2-2】 滚 动 文 字 属 性 设置 综合 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 6-6 所 示 。 


.<== edu 6 2 2.html ==> 

2 <!doctype html> 

3 <html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> 滚动 文字 属性 设置 综合 应 用 </title> 


4 
有 
6 
7 <style type="text/css"> 
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8 p{font-size:18px;color:#0000cc;text-indent:2em; /* 首 行 缩 进 */} 





9 </style> [Oh 
10 </head> fs 
11 <body> 
12 <h3 align="center"> 深 动 文字 属性 设置 综合 应 用 </h3> a 
13 <hr color="#330099"> 视频 讲解 
14 <marquee bgcolor="#c4elc6" width="600px" height="100px" hspace="100" 


Vspace="100" direction="up" behavior="alternate" scrollamount="1" 
scrolldelay="20"> 
15 <Pp> 设 置 滚 动 空白 空间 就 是 指 滚动 文字 背景 和 它 周围 文字 及 图 像 之 间 的 空白 空间 范围 。 默 
认 情 况 下 , 滚动 对 象 周围 的 文字 或 图 像 是 与 滚动 背景 紧密 连接 的 , 使 用 hspace 和 vspace 
可 以 设置 它们 之 间 的 空白 空间 。</p> 


16 </marquee> 
17 </body> 
18 </html> 





设置 滩 动 文字 的 滨 动 空白 与 渡 动 范围 





























设置 滚动 空白 空间 就 是 指 滚 动 文字 背 录 和 亡 周 图 文字 及 图 像 之 间 的 空白 
空间 范围 。 默 认 博 况 下 ， 潭 动 对 象 届 围 的 文字 或 图 像 是 与 浪 动 背景 紧密 连接 


的 ， 使 用 hepacc 和 wpacc 可 以 设置 亡 们 之 间 的 空白 空间 











图 6-6 ”滚动 文字 属性 设置 综合 应 用 


3. 代码 解释 

代码 中 第 14 行 定义 了 深 动 文字 的 背景 颜色 为 #c4elc6、 宽 度 为 600px、 高 度 为 100px、 
背景 与 周边 元 素 水 平 空间 空白 为 100px, 背景 与 周边 元 素 垂直 空白 空间 为 100px, 滚动 方向 
为 向 上 、 滚 动 行为 为 交替 滚动 、 滚 动 速度 为 I px、 滚动 时 延 为 20ms。 


6.3 ”音频 、 视 频 及 Flash 文件 


除了 滚动 文字 外 ， 网 页 中 的 多 媒体 文件 还 包括 音频 文件 、 视 频 文 件 以 及 Flash 文件 ， 
可 以 为 网 页 增加 背景 音乐 等 效果 。 

使 用 <embed></embed> 标 记 ， 可 以 播放 的 文件 类 型 有 Midi、Mav、AIFF、SWF、AV、 
MP3、MOV、AVI 等 。 

1. 基本 语法 


<embed src=" 多 媒体 文件 " width=" 界 面 的 宽度 " height=" 界 面 的 高 度 "autostart= 


"truelfalse" loop=" truelfalse "></embed> 

2. 语法 说 明 

。 width、height: 整 型 值 ， 单 位 为 像素 。 设 置 宽 度 和 高 度 会 出 现 播放 界面 ， 否 则 不 显 
示 播 放 界 面 。 一 些 高 版 本 浏览 器 不 设置 宽度 和 高 度 也 可 以 出 现 播放 界面 。 如 果 播 放 
声音 、 音 乐 文件 作为 背景 音乐 时 ， 必 须 同时 将 宽度 和 高 度 属性 的 值 设置 为 0。 

src: 设置 媒体 文件 的 路 径 。 


。 anutostart: 逻辑 值 。true 为 自动 播放 ; false 为 不 自动 播放 。 


。 loop: 逻辑 值 。 规 定 音 频 或 视频 文件 是 否 循环 。 属 性 值 为 true 时 ， 音 频 或 视频 文件 


循环 ， 属 性 值 为 false 时 ， 音 频 或 视频 文件 不 循环 。 
【 例 6-3-1】 音 视频 及 Flash 文件 播放 。 代 码 如 下 所 示 ， 页 面 效果 如 图 6-7 所 示 。 


1 <!-- edu 6 3 1.html --> 
2 <!doctype html> 

3 <html lang="en"> 

<head> 


mceawmNbhPheoooamDmwaouwn 心 
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eg 
<meta charset="UTF-8"> > 
视频 讲解 
<tit1le> 页 面 中 嵌入 多 媒体 文件 </tit1le> 
<style type="text/css"> 
div{text-align:center; font-size:18px;font-family: 黑 体 ;} 
</style> 


</head> 
<body> 


<div id="" class=""> 
<h3> 醉 花 阴 </h3> 
<h4> 李 清 照 </h4> 
<hr size="5" color="#660099"> 
<p> 薄 雾 浓 云 悉 永 县 ， 瑞 脑 消 金 曾 。<br> 佳 节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。 
<br> 东 篇 把 酒 黄昏 后 有 上 暗 香 盔 袖 。<br> 英 道 不 消魂, 帘 卷 西风 ， 人 比 黄花 瘦 。 </p> 
<hr size="5" color="#660066"> 
<h3> 嵌 入 的 多 媒体 文件 </h3> 
<!-- <bgsound src="embed/53.mid" loop="-1"> --> 
<embed src=" 蔡 琴 明 月 几时 有 .mp3" width="300" height="150" 
autostart="true" loop="true" ></embed> 
<embed src="093zhy.swf" width="300" height="150" autostart= 
"true" loop="true"></embed> 

</div> 


23 </body> 
24 </html> 


3. 代码 解释 
代码 中 第 20 行 通过 embed 标记 嵌入 了 mp3 文件 。 第 21 行 通过 embed 标记 嵌入 了 一 


个 Flash 文件 。 










CD we//FYWeb 有 山王 开 营 技 太 - 杖 3 类 -70170518/ 歌 于 室 W 及 再 姑 /chtVedu_6_3_1 html 
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醉 花 阴 

李清照 
薄 才 浓 云 允 永 悚 ， 瑞 及 消 全 善 
佳节 又 重阳 ， 玉 术 纱 厨 ， 半 夜 凉 初 先 


东 篇 把 酒 黄色 后 ， 有 暗 香 豚 栅 
莫 道 不 清 瑰 ， 帝 卷 西风 ， 人 比 黄花 瘦 - 


访 入 的 多 媒体 文件 





图 6-7 插入 音 视频 及 Flash 文件 
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6.4 综合 实例 


以 “杭州 华 三 通信 技术 有 限 公司 ”的 主 网 站 为 例 ， 运 用 图 像 、 视 频 及 背景 音乐 等 多 媒 
体 元 素来 设计 一 个 简化 的 H3C 页 面 ， 如 图 6-8 所 示 。 



















本 E33 = E33 
wernt BD- cx 
H3C i 
rss 产品 技术 。。 解 流 方案 。。 有 各 支持。 培 吉 认证 合作 改作 。。 关于 我 们 视频 讲解 





云彩 虹 (Clowd Rainbow) 的 解决 方案 ， 可 以 实现 在 上 、 下 级 两 级 云 资 源 罗 理 平台 的 备份 、 资 源 弹性 扩展 与 业务 迁移 分 发 ， 打 硫 休 
A 统一 企业 多 级 去 资源 的 部 署 和 香 娃 ， 通 过 外 区 域 的 备份 与 迁 徐 提升 业务 的 连续 性 ， 为 企业 提供 全 
性 的 IT 这 角 ， 








杭州 华 三 通信 技术 有 限 公司 保留 一 切 权 利 放 ICP 备 09064986 导 
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6-8 图像 与 多 媒体 文件 应 用 


1 < =-=ed 6 4 1.htmnl ==> 


2 <!doctype html> 
3 <html lang="en"> 








4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 图 像 与 多 媒体 文件 应 用 </title> 

浊 <style type="text/css"> 

8 ul{list-style-type:none;} 

9 li{display:inline;margin:0px 10px;} 

10 marquee{clear:both;} 

11 p{text-indent:2em;} 

12 #divl {background:#99ffcc;height:60px;padding:10px50px;margin:0 
auto;} 

43 img{float:left;margin-left:50px;} 

14 #ull{float:left;padding-top:25px;padding-left:20px;} 

15 #ull li{width:100px;} 

16 #div2{background:#00cc00;height:500px;} 

和 </style> 

18 </head> 

和 <body> 

20 <div id="divl" class=""> 

21 <img src="h3clogo.png" alt=""> 

22 <ul id="ul1"> 

23 <1i><a href=""> 产 品 技 术 </a></1i> 

24 <1i><a href=""> 解 决 方案 </a></1i> 

25 <1i><a href=""> 服 务 支 持 </a></1i> 


26 <1i><a href=""> 培 训 认 证 </a></1i> 


27 <1i><a href=""> 合 作 伙 伴 </a></1i> 


28 <1i><a href=""> 关 于 我 们 </a></1i> 

29 </ul> 

30 </div> 

31 <div id="div2" class=""> 

32 <!--<bgsound src="exam01.mp3" > 一 -> 

33 <ul> 

34 <li><img src="h3ccloud.jpg" width="300" height="230" 
border="0" alt=""></1i> 

35 <li><embed src="h3c newitl.swf" loop="true" autostart= 
"true" width="400" height="300"></embed></1i> 

36 </ul> 

37 <marquee behavior="alternate" direction="up" height="100px" 

scrolldelay="500" bgcolor="#ffffff"> 
38 <p> 云 彩虹 (Cloud Rainbow) 的 解决 方案 ， 可 以 实现 在 上 、 下 级 两 级 云 资源 管 


理 平台 的 备份 、 资 源 弹性 扩展 与 业务 迁移 分 发 ， 打 破 IT 资 源 与 业务 只 能 本 地 部 署 
的 局 限 性 , 统一 企业 多 级 云 资源 的 部 署 和 管理 , 通过 跨 区 域 的 备份 与 迁移 提升 业务 
的 连续 性 ， 为 企业 提供 全 局 性 的 IT 资源 管理 视角 。</P> 


39 </marquee> 

40 <hr color="red"> 

41 <p align="center"> 杭 州 华 三 通信 技术 有 限 公 司 .保留 一 切 权利 . 浙 ICP 备 
09064986 号 </p> 

42 </div> 

43 </body> 

44 </html> 


上 述 代 码 中 第 20 一 30 行 在 第 1 个 div 中 插入 一 个 H3C 公司 的 logo 和 一 个 导航 菜单 ， 第 
31 一 42 行 在 第 2 个 div 中 分 别 插入 背景 音乐 、 图 像 、Flash、 深 动 文字 等 ， 第 8 一 16 行 分 别 定 
义 由 、li、marquee、img、Pp 等 标记 样式 及 #div1、#div2、#ull 等 id 样式 。 


本 章 小 结 


本 章 主要 介绍 了 在 网 页 中 插入 图 像 、 滚 动 文字 、 音 频 及 其 他 多 媒体 文件 的 方法 。 着 重 
讲授 了 img 标记 、marquee 标记 、embed 标记 的 语法 及 其 属性 的 设置 方法 。 

运用 这 些 标记 可 以 对 所 开发 的 网 站 进行 重新 布局 、 页 面 美化 ， 不 断 改 善 用 户 体验 ， 吸 
引 更 多 网 络 访问 者 浏览 自己 的 网 站 。 


练习 与 实验 


练习 6 


1. 选择 题 

(1) 指定 滚动 文字 的 滚动 延 时 正确 的 标记 是 (  )。 
(A) <marquee scrollamount ="200"> .… </marquee> 
(B) <marquee loop="200"> ... </marquee> 
(C) <marquee auto="200"> ... </marquee> 


(D) <marquee scrolldelay="200"> ... </marquee> 
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(2) 能 够 播放 Flash 和 视频 文件 的 HIML 标记 是 ( )。 

(A) <embed src=""></embed> (B) <bgsound src="" /> 

(C) <marquee></marquee> (D) <ahref=""></a> 
(3) <img alt=" 这 是 图 像 ">， 这 个 标记 作用 是 )s 

(A) 添加 图 像 链接 

(B) 决定 图 像 的 排列 方式 

(C) 在 浏览 器 完全 读 入 图 像 时 ， 在 图 像 位 置 显示 的 文字 

(D) 在 浏览 器 尚未 完全 读 入 图 像 时 ， 在 图 像 的 上 方 显示 的 “X ”， 并 显示 蔡 代 文本 
(4) HTML 代码 <a hre 传 " 扣 ><img src="/blog/name/images.jpg"></a> 表 示 ( 站 

(A) 按 某 种 方式 对 齐 加 载 的 图 像 (B) 设置 一 个 图 像 链接 

(C) 设置 围绕 一 个 图 像 的 边框 的 大 小 (D) 加 入 一 条 水 平 线 
2. 填空 题 
(1) 网 页 中 插入 图 像 使 用 标记 ,插入 多 媒体 文件 使 用 标 
插入 滚动 文字 使 用 标记 。 
(2) 在 给 图 像 指 定 超 链接 时 ， 默 认 情 况 下 总 是 会 显示 蓝 色 边 框 ， 如 果 不 想 显示 蓝 色 边 
应 使 用 以 下 语句 : <a hre 全 "testhtml"><img src="imagel.gif" ></a>。 
(3) 热 区 area 标记 的 shape 属性 取 值 为 "rect" 表 示 热 区 的 形状 为 ; shape 属性 取 
值 为 "circle" 表 示 热 区 的 形状 为 ，shape 属性 取 值 为 "poly" 表 示 热 区 的 形状 为 

3， 简 答题 

(1) 设置 滚动 文字 marquee 标记 的 hspace 和 vspace 属性 的 作用 是 什么 ? 

(2) 使 用 <img> 标 记 可 以 在 页 面 中 插入 图 像 ， 如 何 设置 图 像 的 高 度 和 宽度 ? 如 何 设置 
替换 文本 ? 


实验 6 
1. 设置 图 像 的 相关 对 齐 属性 ， 编 程 实现 如 图 6-9 所 示 的 效果 。 


可 


前 





I rr rT EC 和 有 有 
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未 设置 对 齐 方式 的 图 像 : 


总 图 像 文件 存储 格式 ， 其 目的 是 试图 (大 未 此 处 使 用 了 "企图 ") 兽 代 GIF 和 TIFF 文 件 格式 ， 同 时 增加 一 些 GEF 文 件 粘 式 所 不 具备 


已 设置 对 齐 方式 的 图 像 : 


PNG 使 用 了 从 LZ77 狐 生 的 一 个 非 专利 无 失真 式 压缩 前 法 〔 和 名 为 dclatioo) 前 法 才 用 像 里 的 直线 进行 入 列 然后 存 信 疗 色差 
值 ， 这 使 凡 PNG 经 这 能 区 得 比 床 培 用 人 基 全 比 GF 更 大 的 压 寻 和 。 全 他 有 一 此 软件 人 语 的 了 预测 而 造成 过 分 辩 钟 的 PNG 文 件 - 


PNG 使 用 了 从 LZ77 藉 生 的 一 个 非 专利 无 失真 式 夺 缩 算法 (各 为 dddoa) 。 本 个 基 丢 对 图 从 里 的 直 寻 进行 入 入 然后 存 估 颜 色 委 
不 


值 ， 这 使 刘 PNG 经 党 能 获得 比 原始 图 像 其 王 比 GF 更 大 的 压 娘 讲 。 但 也 有 


PNGO 使 用 了 从 LZ7? 系 生 的 一 个 非 专利 无 失真 式 压缩 疡 法 (名 为 dcon) 。 这 个 和 法 对 图 像 里 的 直线 进行 预测 然后 存储 阁 色 革 
RA 他 他 有 一 备 软 件 丰台 便 用 千 合 的 天 测 而 芭 成 了 分 莹 人 PNG 


能 使 用 延 语 的 漠 测 而 造成 过 分 角 租 的 PNG 文 忻 。 
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图 6-9 图 像 对 齐 方式 应 用 


2. 设计 一 个 图 像 画 廊 ， 页 面 效 果 如 图 6-10 所 示 。 采 用 无 序列 表 加 载 五 幅 图 像 ， 并 利 
用 滚动 文字 marquee 标记 及 其 属性 的 设置 实现 五 幅 图 像 从 右 向 左 交 荃 滚动 显示 。 
设计 中 需要 用 到 样式 表 〈 直 接 将 下 述 代 码 插入 到 头 部 head 标记 中 ) 如 下 所 示 : 
<style type="text/css"> 
img{width:100px;height:100px;border:2px #cc0066 ridge;} 
ul{list-style-type:none;} 
li{float:left;} 
</style> 

















图 6-10 图 像 画廊 
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本 章 学 习 目标 


在 网 页 设计 过 程 中 经 常会 遇 到 需要 对 网 页 中 的 同样 的 内 容 进行 重复 的 属性 设置 ， 这 既 
浪费 时 间 , 也 增加 了 代码 宛 余 , 还 带 来 了 后 期 网 站 改版 维护 困难 等 诸多 问题 , CSS (Cascading 
Style Sheet， 层 全 样式 表 ) 就 是 为 了 简化 页 面 元 素 修饰 、 美 化 工作 而 诞生 的 。 所 以 本 章 引 
入 CSS， 主 要 是 为 了 实现 对 网 页 的 字体 、 颜 色 、 布 局 等 元 素 进 行 精确 控制 ， 解 决 网 页 内 容 
与 网 页 表现 分 离 的 问题 ， 进 一 步 提高 网 站 的 可 维护 性 ， 方 便 网 站 快速 重 构 ， 实 现 网 站 定期 
换 肤 的 功能 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 理解 CSS 的 概念 、 特 点 。 

。 掌握 CSS 基本 语法 、 选 择 器 分 类 与 声明 的 结构 。 

。 掌握 CSS 的 定义 及 引用 的 方式 。 

。 理解 CSS 继承 与 层 蕉 的 含义 。 


7.1 CSS 概念 


CSS 属于 动态 HTML 技术 ， 它 扩充 了 HTML 标记 的 属性 设置 ， 使 得 页 面 显示 效果 更 
加 丰富 ， 表 现 效果 更 加 灵活 ， 它 与 div 的 配合 使 用 可 以 很 好 地 对 页 面 进行 分 割 和 布局 。 传 
统 HTML 网 页 设计 往往 是 内 容 和 表现 混合 ， 随 着 网 站 规模 不 断 扩 大 , 无论 是 修改 网 页 还 是 
维护 网 站 都 显得 越 来 越 困难 。CSS 对 页 面 元 素 、 布 局 等 能 够 更 加 精确 控制 ， 同 时 能 够 实现 
内 容 和 表现 的 分 离 ， 使 得 网 站 的 设计 风格 趋向 统一 、 维 护 更 加 容易 。 


7.1.1 CSS 的 基本 概念 


CSS 也 称 为 级 联 样式 表 , 用 来 进行 网 页 风格 设计 。 由 Hakon Wium Lie( 哈 肯 * 维 姆 莱 ， 
挪威 ) 和 Bert Bos〈 伯 特 。 波 斯 ， 荷 兰 ) 于 1994 年 共同 发 明 。 

在 网 页 设计 时 采用 CSS 技术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效 
果实 现 更 加 精确 的 控制 。 只 要 对 相应 的 代码 做 一 些 简单 的 修改 ， 既 可 以 改变 同一 页 面 的 不 
同 部 分 效果 ， 也 可 以 改变 同一 个 网 站 中 不 同 网 页 的 外 观 和 格式 。 


7.1.2 ”传统 HTML 的 缺点 


HTML 标记 是 用 来 定义 文档 内 容 ， 例 如 通过 h1、p、table 等 标记 表达 “这 是 标题 ”这 
是 段落 ”“ 这 是 表格 ”等 信息 ， 而 文档 布局 由 浏览 器 完成 。 随 着 新 的 HTML 标记 例如 字 





体 标记 和 颜色 属性 ) 添加 到 HIML 规范 中 ， 要 实现 页 面 美工 、 文 档 内 容 清晰 、 独 立 于 文档 
表现 层 的 站 点 变 得 越 来 越 困难 。 传 统 HTML 的 缺点 主要 体现 在 如 下 几 个 方面 。 

1. 维护 困难 

为 了 修改 某 个 特殊 标记 的 格式 ， 需 要 花费 很 多 的 时 间 ， 尤 其 对 于 整个 网 站 而 言 ， 后 期 
修改 和 维护 的 成 本 很 高 。 

2. 标记 不 足 

HTML 自身 的 标记 并 不 丰富 ， 很 多 标记 都 是 为 网 页 内 容 服务 的 ， 而 关于 美工 的 标记 ， 
例如 文字 间距 、 段 落 缩 进 等 ， 在 HTML 中 都 很 难 找到 。 

3. 网 页 过 “ 胖 ” 

由 于 对 各 种 风格 样式 没有 统一 进行 控制 , 用 HIML 编写 的 页 面 往往 体积 过 大 ， 占 用 了 
很 多 宝贵 的 带宽 。 

4. 定位 困难 

在 整体 页 面 布局 时 ，HTML 对 于 各 个 模块 的 位 置 调整 显得 捉襟见肘 。 


7.1.3 CSS 的 特点 


CSS 通过 定义 标记 或 标记 属性 的 外 在 表现 ， 对 页 面 结构 风格 进行 控制 ， 分 离 文档 的 内 
容 和 表现 ， 克 服 了 传统 HTML 的 缺点 。 将 CSS 嵌入 在 页 面 中 ， 通 过 浏览 器 解释 执行 ， 而 
且 CSS 文件 是 文本 文件 ， 只 要 理解 了 HTML 就 可 以 掌握 它 。 


7.1.4 CSS 的 优势 


CSS 可 以 称 得 上 Web 设计 领域 的 一 个 突破 ， 它 的 诞生 使 得 网 站 开发 者 如 鱼 得 水 ， 其 具 
有 以 下 几 点 优势 。 

1. 表现 和 内 容 分 离 

CSS 通过 定义 HTML 标记 如 何 显示 控制 网 页 的 格式 , 使 得 页 面 内 容 和 表现 分 离 , 简化 
了 网 页 格式 设计 ， 也 使 得 对 网 页 格式 的 修改 更 方便 。 

2. 增强 了 网 页 的 表现 力 

CSS 样式 属性 提供 了 比 HIML 更 多 的 格式 设计 功能 。 例 如 ， 可 以 通过 CSS 样式 去 掉 
网 页 中 超级 链接 的 下 画 线 ， 甚 至 可 以 为 文字 添加 阴影 、 翻 转 效果 等 。 

3. 使 整个 网 站 显示 风格 趋 于 统一 

将 CSS 样式 定义 到 样式 表 文件 中 ， 然 后 在 多 个 网 页 中 同时 应 用 样式 表 文件 中 的 样式 ， 
就 可 以 确保 多 个 网 页 具有 一 致 的 格式 ， 并 且 可 以 随时 更 新 样式 表 文件 ， 实 现 自动 更 新 多 个 
网 页 的 格式 功能 ， 从 而 大 大 降低 了 网 站 的 开发 与 维护 的 成 本 。 


7.1.5 ”CSS 的 编辑 方法 


编辑 CSS 主要 有 两 种 方式 : 

(1) 写 在 HIML 文件 里 面 的 CSS 规则 。 根 据 其 位 置 又 可 以 分 为 两 种 形式 : 一 种 是 写 
在 某 个 元 素 的 属性 部 分 ， 作 为 style 属性 的 值 ， 另 一 种 是 写 在 head 标记 里 面 ， 通 过 style 标 
记 包 含 。 

(2) 将 CSS 规则 写 在 单独 的 文件 里 。 建 议 采 用 此 种 方式 ， 该 文件 称 为 CSS 文件 ， 它 
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是 纯 文本 文件 ， 可 以 使 用 任何 编辑 器 编辑 ， 文 件 后 级 名 为 .css。 在 需要 应 用 CSS 规则 的 多 个 
HTML 文件 里 面 引用 该 CSS 文件 ， 从 而 实现 内 容 和 表现 的 分 离 ， 也 提高 了 网 站 可 维护 性 。 


7.2 ”使 用 CSS 控制 Web 页面 


CSS 控制 页 面 是 通过 CSS 规则 实现 的 ，CSS 规则 由 选择 器 和 声明 组 成 , 声明 由 属性 和 
属性 值 对 组 成 。CSS 提供 了 丰富 的 选择 器 类 型 ， 包 括 标记 选择 器 、 类 选择 器 、id 选择 器 、 
伪 类 选择 器 及 属性 选择 器 等 ， 能 够 灵活 地 对 整个 页 面 、 页 面 中 的 某 个 标记 或 一 类 标记 进行 
样式 设置 。 


7.2.1 CSS 基本 语法 


CSS 就 是 一 个 包含 一 个 或 多 个 规则 的 文本 文件 。CSS 规则 由 两 个 主要 的 部 分 构成 : 选 
择 器 (Selector) 和 声明 (Declaration)。 

选择 器 通常 是 需要 改变 样式 的 HTML 元 素 。 

声明 由 一 个 或 多 个 属性 与 属性 值 对 组 成 。 属性 是 CSS 的 关键 字 , 如 font-family (字体 )、 
color〈 颜 色 ) 和 border (边框 ) 等。 属性 用 于 指定 选择 器 某 一 方面 的 特性 ， 而 属性 值 则 用 
于 指定 选择 器 的 特性 的 具体 特征 。 

1. 基本 语法 


selector {propertyl: valuel; property2: value2; property3: value3;..} 


2. 语法 说 明 


1) 选择 器 

选择 器 可 以 是 HIML 标记 名 称 或 者 属性 的 值 ， 也 可 以 是 自 定义 的 标识 符 。 

2) 属性 /属性 值 对 

“属性 :属性 值 ”必须 一 一 对 应 ， 属 性 与 属性 值 之 间 必 须 用 “:” 连 接 ， 每 个 属性 /属性 值 
对 之 间 用 分 号 () 分 隔 。 

3) 属性 


在 CSS 中 对 属性 命名 与 脚本 语言 中 对 属性 命名 有 一 点 不 同 ， 即 属性 名 称 的 写法 ， 在 
CSS 中 ， 凡 是 属性 名 为 两 个 或 两 个 以 上 的 单词 构成 时 ， 单 词 之 间 以 连词 符号 (-) 分 隔 ， 例 如 
背景 颜色 属性 background-color; 而 在 脚本 中 ， 对 象 属性 则 连 写成 backgroundColor， 如 果 
属性 由 两 个 以 上 单词 构成 ， 则 从 第 二 个 单词 开始 向 后 ， 所 有 单词 首 字母 必须 大 写 。 

下 面 是 一 个 简单 样式 表 的 示例 : 


p{background-color:red; font-size:20px; color:green; } 


上 例 的 CSS 规则 中 p 为 选择 器 ,background-color、font-size、color 为 属性 , red、20px、 
green 为 属性 值 ， 该 CSS 规则 将 HTML 中 的 所 有 段落 统一 设置 成 “背景 色 为 红色 、 字 体 大 
小 为 20px 以 及 字体 颜色 为 绿色 ”。 通 常 为 了 增强 样式 定义 的 可 读 性 ， 建 议 每 行 只 描述 一 个 
属性 ， 格 式 如 下 所 示 : 


pt{ 
background-color:red; 
font-size:20px; 
color:green; 
} 
4) 复合 属性 
在 CSS 中 , 有些 属性 可 以 表示 多 个 属性 的 值 。 如 关于 文字 的 设置 , 有 font-family、 font-size、 
font-style， 这 些 可 以 用 一 个 属性 font 来 表示 ， 例 如 : 


p{ font-style:italic; font-size:20px; font-family: 黑体 ; } 


可 以 直接 使 用 p{ font:italic 20px 黑体 ; } 来 表示 。 

值得 注意 的 是 , 使 用 font 复合 属性 在 一 个 声明 中 设置 所 有 字体 属性 时 ， 应 按照 font-style、 
font-variant、font-weight、font-size/line-height、font-family 的 顺序 ， 可 以 不 设置 其 中 的 某 个 
值 ， 例如 “font:100% verdana;” 仅 设置 了 font-size、font-family 属性 ， 其 他 未 设置 的 属性 会 
使 用 其 默认 值 。 类 似 的 复合 属性 还 有 border、margin、padding 等 。 


5) 多 个 属性 值 
在 CSS 中 ， 有 些 属 性 可 以 设置 多 个 属性 值 ， 用 去 号 (分隔 。 例 如 : 
selector{ font-family: "楷体 gb2312 "，" 黑 体 "，"” Times New Roman "; } 


该 样式 表 说 明了 可 以 使 用 楷体 gsb2312、 黑 体 、Times New Roman 三 种 字体 来 设置 
selector 的 字体 效果 。 若 系统 中 找 不 到 楷体 gb2312， 则 使 用 黑体 若 也 没有 黑体 ， 则 使 用 
Times New Roman， 即 按 出 现 的 先后 顺序 优先 选择 。 

6) CSS 注释 

像 其 他 语言 一 样 ，CSS 允许 用 户 在 源 代码 中 嵌入 注释 。CSS 注释 被 浏览 器 忽略 ， 不 影 
响 网 页 效果 。 注 释 有 助 于 记 住 复杂 的 样式 规则 的 作用 、 应 用 的 范围 等 ， 便 于 样式 规则 的 后 
期 维护 和 应 用 。CSS 注释 以 字符 “/*” 开 始 ， 以 字符 “*/” 结 束 。 下 面 是 注释 样 例 : 


/* 这 是 多 行 注释 ”CSs 文 件 名 : out.css 
功能 说 明 : 定义 样式 


/* 单行 注释 ”样式 段落 p */ 
p{font-size:20px; /* 行 尾 注 释 ”定义 字号 */ } 


“/# ... */” 这 种 格式 可 以 单独 一 行书 写 ， 也 可 以 写 在 语句 的 后 面 ， 可 以 注释 一 行 ， 也 
可 以 注释 多 行 。 注 释 不 能 嵌 套 。 


7.2.2 CSS 选择 器 类 型 


CSS 选择 器 主要 有 五 种 类 型 : 标记 选择 器 、 类 选择 器 、id 选择 器 、 伪 类 选择 器 及 属性 
选择 器 等 。 

1. 标记 选择 器 

标记 选择 器 (也 可 称 为 “元 素 选择 器 ”) 即 直接 使 用 HIML 标记 名 称 作 为 选择 器 ， 它 
定义 的 样式 作用 于 页 面 中 所 有 与 选择 器 同名 的 标记 ， 前 面 的 示例 代码 均 属于 标记 选择 器 ， 
这 里 不 再 详细 介绍 。 
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2. 类 选择 器 
任何 合法 的 HTML 标记 都 可 以 使 用 class 属性 , class 属性 用 于 定义 页 面 上 的 HTML 元 
素 标记 组 ， 这 些 标记 组 通常 具有 相同 的 功能 或 作用 ， 因 此 它们 可 以 设置 相同 的 样式 规则 。 
首先 创建 类 ， 用 户 需 要 给 它 命名 ， 类 名 可 以 是 任何 形式 ， 建 议 读者 以 描述 性 的 名 称 来 
起 名 ， 这 样 对 于 整个 代码 的 维护 及 协同 开发 有 很 大 帮助 。 为 类 选择 了 名 字 之 后 ， 用 户 可 以 
通过 设置 class 属性 为 HTML 标记 分 配 类 。 如 果 是 多 个 类 要 用 空格 分 隔 ， 那 么 HIML 标记 
可 以 是 多 个 类 的 一 部 分 。 示 例 代码 如 下 所 示 : 
<p class="c2"> 著 名 诗人 </p> 
<ol class="c1"> 
<1i class="c2"> 李 白 </1i> 
<li class="c3 c4"> 杜 甫 </1i> 
<1i> 杜 牧 </1i> 
</o1> 
在 HTML 标记 中 设置 了 class 属性 之 后 ， 用 户 可 以 使 用 它 作为 CSS 的 类 选择 器 。 
类 选择 器 由 点 号 “.” 及 类 名 称 直接 相连 构成 。 示 例 代码 如 下 所 示 : 


.C2{ color:red; font-weight:bold; } 

.C3{ font-style:italic; } 

标记 选择 器 和 类 选择 器 可 以 联合 使 用 ， 使 用 方式 是 标记 选择 器 与 类 选择 器 直接 相连 ， 
称 为 联合 选择 器 ， 可 以 用 来 设置 特定 类 中 的 特定 标记 。 示 例 代码 如 下 所 示 : 

p.c2{ color:green; font-size:20px; } 

li.c3{ color:red; } 

在 上 面 的 代码 中 ,前 者 选择 所 有 class="c2" 的 <p> 元 素 , 后 者 选择 所 有 class="c3" 的 <li> 
元 素 。 

3. id 选择 器 

HTML 标记 的 id 属性 与 class 属性 类 似 ， 可 以 用 于 各 类 标记 中 ， 也 可 以 作为 CSS 选择 
器 来 使 用 。id 具有 很 多 限制 ， 只 有 页 面 上 的 标记 (body 标记 及 其 子 标记 ) 才能 具有 给 定 的 
id。 在 HTML 文件 内 , 每 个 id 属性 的 取 值 必须 唯一 ， 且 只 能 用 于 指定 的 一 个 标记 。id 属性 
的 取 值 必须 以 字母 开头 ， 由 字母 、 数 字 、 下 画 线 、 连 字符 组 成 。 如 果 作 为 CSS 选择 器 使 用 ， 
通常 建议 使 用 字母 和 数字 及 下 画 线 组 合作 为 id 名称。 

id 选择 器 由 井 号 “#” 及 id 属性 值 直接 相连 构成 。 示 例 代 码 如 下 所 示 : 

1 #right{ color:red; text-align:right; font-size:20px; } 

2 <p id="right"> 使 用 id 选 择 器 设置 样式 。</p> 

对 于 CSS 来 说 , id 选择 器 与 class 选择 器 的 功能 很 相似 但 不 完全 相同 。 一 般 来 说 , class 
选择 器 更 加 灵活 ， 能 完成 id 选择 器 的 所 有 作用 ， 也 能 完成 更 加 复杂 的 功能 应 用 。 如 果 对 样 
式 可 重用 性 要 求 较 高 , 则 应 该 使 用 class 选择 器 将 新 元 素 添加 到 类 中 来 完成 。 对 于 需要 唯一 
标识 的 页 面 元 素 ， 则 可 以 使 用 id 选择 器 。 

4. 伪 类 选择 器 

前 面 介绍 的 选择 器 都 是 能 够 与 HIML 中 具体 标记 对 应 的 , 但 是 像 段 落 的 第 1 行 、 超 链 
接 访问 前 与 访问 后 等 ， 就 没有 HTML 标记 与 之 对 应 ， 从 而 也 没有 简单 的 CSS 选择 器 应 用 ， 


为 此 CSS 引进 了 伪 类 选择 器 。 其 用 法 如 下 : 
标记 : 伪 类 名 { /* CSS 规 则 */ } 


常用 伪 类 如 表 7-1 所 示 。 











表 7-1 常用 伪 类 
伪 类 名 说 明 
link 设置 a 标记 在 未 被 访问 前 的 样式 
hover 设置 a 标记 在 鼠标 悬 停 时 的 样式 
active 设置 a 标记 在 被 用 户 激活 〈 在 鼠标 点 击 与 释放 之 间 ) 时 的 样式 
visited 设置 a 标记 在 被 访问 后 的 样式 
first-letter 作用 于 块 ， 设 置 第 一 个 字符 的 样式 
first-line 作用 于 块 ， 设 置 第 一 个 行 的 样式 表 
first-child 设置 第 一 个 子 标记 的 样式 
lang 设置 具有 lang 属性 的 标记 的 样式 





【 例 7-2-1】 伪 类 选择 器 演示 。 代 码 如 下 所 示 ， 页 面 效果 如 图 7-1 所 示 。 


1 <!-- edu 7 2 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 选 择 器 演示 </title> 

汪 <style type="text/css"> 

8 a:link{color:gray’;text-decoration:none;} 

9 a:visited{color:blue;text-decoration:none;} 

10 a:hover{color:red;text-decoration:underline;} 

11 a:active{color:yellow;text-decoration:underline;} 

12 p:first-letter{font-weight:bold;font-family: "黑体 ";} 

13 p:first-line{font-size:32px;} 

14 </style> 

15 </head> 

16 <body> 

li <p> 在 支持 CSS 的 浏览 器 中 ， 链 接 的 不 同 状态 都 可 以 不 同 的 方式 显示 ， 这 些 状态 包括 : 
活动 状态 ， 已 被 访问 状态 ， 未 被 访问 状态 和 鼠标 悬 停 状态 。<br> 

18 注意 : a:hover 必须 被 置 于 a:1ink 和 a:visited 之 后 ， 才 是 有 效 的 。a:active 
必须 被 置 于 a :hover 之 后 ， 才 是 有 效 的 。 

19 </p> 

20 <a href="http://www.baidu.com"> 搜 索 一 下 : 百度 </a> 

2 </body> 

22 </html> 





rr EF E 
在 支持 CSS 的 浏览 器 中 ， 链接 的 不 同 状态 都 可 以 不 同 的 


方式 显示 ， 这 些 状态 包括 ， 医 动 状态 ， 已 被 访问 状态 ， 未 被 访问 状态 和 鼠标 悬 停 状 态 
注意 ，ahover 必须 补 置 于 sink 和 avisled 之 后 ， 才 是 有 效 的 。xactve 必 须 禄 置 于 shover 之 后 ， 才 是 有 效 的 。 
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5. 代码 解释 

代码 中 第 8 一 13 行 定 义 伪 类 选择 器 ， 分 别 设置 了 超 链接 未 访问 、 已 访问 、 鼠 标 悬 停 、 
激活 的 样式 以 及 段落 第 1 个 字 黑 体 加 粗 、 第 1 行 字号 32px 的 样式 。 

特别 应 注意 a:hover 必须 置 于 a:link 和 a:visited 之 后 ， 才 是 有 效 的 ; a:active 必须 置 于 
ahover 之 后 ， 才 是 有 效 的 。 设 置 的 顺序 如 下 : 


:link{color:blue;} 
visited{color:blue;} 


hover{color:red;} 
active{color:yellow;} 


CSS 属性 选择 器 
除了 使 用 CSS 的 标记 、class、id、 伪 类 选择 器 外 ， 还 可 以 使 用 属性 选择 器 给 带 有 指定 
属性 的 HIML 标记 设置 样式 ， 如 表 7-2 所 示 。 低 版 本 的 浏览 器 不 支持 属性 选择 器 。 


表 7-2 CSS 属性 选择 器 及 描述 表 

选 择 器 描 述 
[attribute] 用 于 选取 带 有 指定 属性 的 标记 
[attribute=value] 用 于 选取 带 有 指定 属性 和 值 的 标记 
[attribute~=value] “| 用 于 选取 属性 值 中 包含 指定 词汇 的 标记 〈 用 空格 分 隔 的 字 词 列表 ) 
用 于 选取 带 有 以 指定 值 开头 的 属性 值 的 标记 (属性 值 是 value 或 者 以 “value-” 开 
头 的 值 ) 
[attribute^=value] ”| 匹配 属性 值 以 指定 值 开头 的 每 个 标记 
[attribute$=value] “| 匹配 属性 值 以 指定 值 结尾 的 每 个 标记 
[attribute*=value] | 匹配 属性 值 中 包含 指定 值 的 每 个 标记 


1) 属性 选择 器 
定义 属性 选择 器 时 ， 需 要 通过 方 括 号 “[]” 将 属性 包围 住 ,例如 [target]、[color]。 只 需 
要 匹配 属性 名 。 格 式 如 下 所 示 : 


poop 


SS 


[attribute|=value] 





[属性 名 ] {属性 :属性 值 ;属性 :属性 值 ; . . . ; } 
[title] {color:red;} /* 带 有 title 属 性 的 所 有 元 素 设置 样式 : */ 
2) 属性 和 值 选择 器 


指定 属性 名 ， 同 时 指定 了 该 属性 的 属性 值 ， 以 指定 “属性 / 值 ” 的 所 有 标记 设置 样式 。 
例如 为 [class="pl"] 的 所 有 段落 设置 统一 样式 。 格 式 如 下 所 示 : 


class="pl"] {font-size:24px;color:red;border:5px solid blue;} 
Pp P: P: 


3) 多 个 值 的 属性 和 值 选择 器 
可 以 对 具有 指定 值 的 name 属性 的 所 有 标记 设置 样式 。 适 用 于 由 空格 分 隔 的 属性 值 。 


name~=value] {background:#FF00CC;} ”/* 属 性 值 是 以 空格 分 隔 的 词汇 列表 中 一 个 单独 的 词 */ 
name^=value] {background:#FF00CC; } /* 属 性 值 是 以 value 开 头 的 */ 

name$=value] {background:#FF00CC; } /* 属 性 值 是 以 value 结 尾 的 */ 

name*=value] {background:#C3C;} /* 属 性 值 中 包含 了 value*/ 

name|=value] {background:#C3C;} /* 属 性 值 是 value 或 者 以 "value-" 开 头 的 值 */ 





【 例 7-2-2】 属 性 选择 器 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 7-2 所 示 。 


1 = on 了 
2 <!doctype html> 
3 <html lang="en"> 











4 <head> 
时 <meta charset="UTF-8"> 
6 <title> 属 性 选择 器 的 应 用 </title> 
yl <style type="text/css"> 
8 [title] {font-size:18px;color:green;} 
9 plname="chu"] {font-style:italic;} 
0 plname~="chu"] {font-weight:bold;} 
11 plname^="chu"] {text-align:center;} 
2 plname$="jiu"] {color:blue;} 
plname*="jiang"] {color:red;text-decoration:underline;} 
4 </style> 
15 </head> 
6 <body> 
| <h3> 属 性 选择 器 的 应 用 </h3> 
8 <p title="pl" name="chu"> [title] [name="chu"] 属 性 和 值 选择 器 ,绿色 、 
18px、 斜 体 、 居 中 </P> 
9 <p name="jiu chu "> [name="jiu chu "] 属 性 值 包含 指定 值 的 选择 器 ， 标 粗 </p> 
20 <p name="1linchujiu"> 属 性 值 中 以 jiu 结 尾 的 ， 蓝 色 </p> 
21 <p name="changjianghuanghe"> 属 性 值 中 包含 jiang 字 符 串 , 红色 、 下 夯 线 </p> 


22 </body> 


23 </html> 
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图 7-2 属性 选择 器 综合 应 用 (Chrome 浏览 器 ) 


7.2.3 ”CSS 选择 器 声明 


在 声明 各 种 CSS 选择 器 时 ， 如 果 某 些 选择 器 的 风格 是 完全 相同 的 ， 或 者 部 分 相同 ， 都 
可 以 利用 集体 声明 的 方法 ， 用 “,” 分 隔 多 个 选择 器 ， 对 风格 相同 的 CSS 选择 器 同时 声明 。 


1. 集体 声明 


集体 声明 示例 代码 如 下 : 


hl,h2,h3,h4,h5,p{ color:purple; font-size:16px; } 


h2.special, 


2. 全 局 声明 


.special, #one{ text-decoration:underline;} 


对 于 实际 网 站 中 的 一 些小 型 页 面 ， 例 如 弹出 的 小 对 话 框 和 上 传 附 件 的 小 窗口 等 ， 希 望 
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这 些 页 面 中 所 有 的 标记 都 使 用 同一 种 CSS 样式 , 但 又 不 希望 通过 逐个 加 入 集体 声明 列表 的 
方式 ， 这 时 可 以 利用 全 局 声明 符号 “*”。 示 例 代 码 如 下 : 


*{ color:purple; font-size:16px; } 


3. 派生 选择 器 (上 下 文选 择 器 ) 

另外 ， 根 据 标记 所 在 位 置 的 上 下 文 关系 来 定义 样式 ， 可 以 使 标记 更 加 简洁 。 派 生 选择 
器 允许 根据 文档 的 上 下 文 关系 来 确定 某 个 标记 的 样式 。 通 过 合理 地 使 用 派生 选择 器 ， 可 以 
使 CSS 代码 变 得 更 加 整洁 。 

例如 ,要 让 列表 项 <li> 中 的 <strong> 标 记 变 为 斜体 字 ， 而 不 是 通常 的 粗 体 字 ， 可 以 这 样 
定义 一 个 派生 选择 器 : 

1 1i strong { font-style: italic; font-weight: normal; } 

2 strong{ font-weight:bold; } 

测试 代码 如 下 : 

1 <p><strong> 我 是 粗 体 字 ， 不 是 斜体 字 ， 因 为 我 不 在 列表 当中 ， 所 以 这 个 规则 对 我 不 起 作用 


</strong></p> 

2 <ol> 

3 ”<li><strong> 我 是 斜体 字 。 这 是 因为 strong 元 素 位 于 1i 标 记 内 。</strong></1i> 
4 <1i> 我 是 正常 的 字体 。</1i> 

5 


</o1> 


在 上 面 的 例子 中 , 有 两 个 strong 标记 , 但 只 有 1 工 元 素 中 的 strong 元 素 的 样式 为 斜体 字 ， 
而 且 无 须 为 strong 标记 定义 特别 的 class 或 id， 应 用 派生 选择 器 ， 代 码 更 加 简洁 。 


7.2.4 CSS 定义 与 引用 


CSS 按 其 位 置 可 以 分 为 四 种 : 内 联 样式 表 (Inline Style Sheet)、 内 部 样式 表 (Internal Style 
Sheet)、 链 接 外 部 样式 表 (Link External Style Sheet) 以 及 导入 外 部 样式 表 (Import External 
Style Sheet) 。 

1. 内 联 样式 表 〈 行 内 样式 表 ) 

内 联 样式 表 的 CSS 规则 写 在 首 标记 内 ， 只 对 所 在 的 标记 有 效 。 几 乎 任何 一 个 HIML 
标记 上 都 可 以 设置 style 属性 。 属 性 值 可 以 包含 CSS 规则 的 声明 ， 不 包含 选择 器 。 


1) 基本 语法 
< 标记 style=" 属 性 1: 属性 值 1 ;属性 2: 属性 值 2; . . . "> 修饰 的 内 容 </ 标 记 > 


2) 语法 说 明 

。 标记 是 指 HIML 标记 ， 如 p、hl、body 等 标记 。 

。 标记 的 style 定义 的 声明 只 对 自身 起 作用 。 

。 style 属性 的 值 可 以 包含 多 个 属性 / 值 对 ， 每 一 属性 / 值 对 之 间 用 “:” 分 隔 。 
。 标记 自身 定义 的 style 样式 优先 于 其 他 所 有 样式 定义 。 

【 例 7-2-3】 内 联 样式 表 的 使 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 7-3 所 示 。 


1 <!-- edu 7 2 3.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 内 联 样式 (Inline Style) </title> 

</head> 

8 <body> 

9 <p style="font-size:20px; font-style:italic;"> 这 个 内 联 样式 (Inline 
Style) 定义 段落 文字 大 小 20px， 文 字 风 格 为 斜体 。</p> 

10 <p> 这 段 文字 没有 使 用 内 联 样式 。</p> 

了 LT </body> 

12 </html> 

3) 代码 解释 


代码 中 第 9 行 采用 内 联 样式 表 定义 段落 p 标记 的 样式 。 通 过 设置 style 属性 值 为 
“font-size:20px;font-style:italic;” 来 实现 。style 属性 的 值 相当 于 CSS 规则 中 声明 部 分 ， 由 多 
个 “属性 / 值 ”对 构成 ,“ 属 性 / 值 ”对 之 间 用 “;” 分 隔 。 





< 中 





| 过 个 内 税 华 式 (Inline Syle ) 证 尽 民 束 葡 六 大 Mi20 pr ， 放 学 风 散 为 钴 从 。 引 
这 有 段 文 字 没 有 使 用 内 对 样式 。 
- =- 二 100%5 





图 7-3 内 联 样式 表 


值得 注意 的 是 ， 内 容 和 表现 的 分 离 是 创建 CSS 的 初衷 ,这 一 技术 的 产生 将 使 内 联 样式 
的 应 用 大 为 减 色 ， 使 用 HTML+CSS 的 方式 更 有 意义 。 除 非 有 特别 的 用 途 ， 否 则 开发 者 应 
该 避免 使 用 内 联 样式 表 。 

2. 内 部 样式 表 

内 部 样式 表 写 在 HTML 的 <head></head> 里 面 ， 只 对 所 在 的 网 页 有 效 。 使 用 <style> 
</style> 标 记 对 来 放置 CSS 规则 。 

1) 基本 语法 

<style type="text/css"> 


选择 器 1 {属性 1: 属性 值 1 ; 属性 2: 属性 值 2; . . .} 
选择 器 2 {属性 1: 属性 值 1 ; 属性 2: 属性 值 2; . . .} 


选择 器 n {属性 1: 属性 值 1; 属性 2: 属性 值 2; . . . } 


</style> 

2) 语法 说 明 

。 style 标记 是 成 对 标记 ， 有 一 个 type 属性 是 指 style 元 素 以 CSS 的 语法 定义 。 
。 选择 器 1、…… 、 选 择 器 n， 可 以 定义 n 个 选择 器 ， 再 定义 声明 部 分 。 


。 属性 和 属性 值 之 间 用 冒号 连接 ,“ 属 性 /属性 值 ” 对 之 间 用 分 号 分 隔 。 
【 例 7-2-4】 内 部 样式 表 的 使 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 7-4 所 示 。 


1 <!-- edu 7 2 4.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
5 <meta charset="UTF-8"> 第 
6 <title> 内 部 样式 (Internal Style) </title> 7 
时 <style type="text/css"> 
= 
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8 -int_cssf 

9 border-width:2px; /* 定 义 边框 宽度 *#/ 
10 border-style:solid; /* 定 义 边框 样式 */ 
text-align:center; /* 定 义 文本 对 齐 方式 */ 
12 color:red; /* 定 义 颜色 */ 

1 } 

14 #h1l css{ 

15 font-size:28px; /* 定 义 字 体 大 小 */ 
16 font-style:italic; /* 定 义 字 体 样式 */ 
3 } 

18 </style> 

19 </head> 

20 <body> 

21 <hl class="int_css">h1 这 个 标题 使 用 类 样式 。</h1> 
2 <hl id="h1l_css">h1 这 个 标题 使 用 ID 样式 。</h1> 

23 <h1>h1 这 个 标题 没有 使 用 样式 。</h1> 

24 </body> 

25 </html> 








hl 这 个 标题 使 用 类 样式 。 











有 吉他 苇 失 WD# 式 。 
hl 这 个 标题 没有 使 用 样式 。 








7-4 内 部 样式 表 


3) 代码 解释 

代码 中 第 7 行 一 第 18 行 是 定义 内 部 样式 表 。 其 中 第 8 行 定义 类 选择 器 ;第 14 行 定 义 
id 选择 器 ; 第 21 行 引用 类 样式 ， 只 有 设置 了 class 属性 值 为 int_css 的 标记 规则 才 会 生效 。 
第 22 行 引 用 ID 样式 ， 只 有 设置 了 id 属性 值 为 hl_css 的 标记 规则 才 会 生效 。 第 23 行 是 默 
认 样 式 。 

3. 外 部 样式 表 

外 部 样式 表 是 将 CSS 规则 写 在 以 .css 为 后 绥 的 CSS 文件 里 , 在 需要 用 到 此 样式 的 网 页 
里 引用 该 CSS 文件 。 一 个 CSS 文件 可 以 供 多 个 网 页 引用 ， 从 而 实现 整体 页 面 风 格 统一 设 
置 。 根 据 引 用 的 方式 不 同 可 以 分 为 链接 外 部 样式 表 和 导入 外 部 样式 表 ， 它 们 形式 上 的 区 
别 在 于 链接 外 部 样式 表 通 过 链接 link 标记 ， 导 入 外 部 样式 表 必 须 在 内 部 样式 表 内 首 行 通过 
“@import url 〈" 外 部 样式 文件 名 称 ") :” 来 定义 。 

1) 链接 外 部 样式 表 

(1) 基本 语法 。 

<link type="text/css" rel="stylesheet" href="out .css"> 

(2) 语法 说 明 。 

link 标记 是 单个 标记 ， 也 是 空 标记 ， 它 仅 包含 属性 。 此 标记 只 能 存在 于 head 部 分 ， 不 
过 它 可 出 现任 何 次 数 。link 标记 的 属性 、 取 值 及 说 明 如 表 7-3 所 示 。 


表 7-3 link 标记 的 属性 、 取 值 及 说 明 
取 值 
MIME type 
stylesheet 
URL 













说 明 
规定 被 链接 文档 的 MIME 类 型 

定义 当前 文档 与 被 链接 文档 之 间 的 关系 
定义 被 链接 文档 的 位 置 











【 例 7-2-5】 链 接 外 部 样式 表 的 使 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 7-5 所 示 。 


e。 CSS 文件 out.css 
/* 样 式 表 文 件 out .css*/ 


int. Cant 





1 
和 2» ix 
上 border-width:2px; /* 定 义 边框 宽度 */ 视频 讲解 
4 border-style:solid;  /* 定 义 边框 样式 */ 
5 text-align:center; /* 定 义 文本 对 齐 方 式 */ 
6 color:green; /* 定 义 颜色 */ 
时 六 
8 #hl css{ 
9 font-size:28px; /* 定 义 字 体 大 小 */ 
10 font-weight:bold; /* 定 义 字 体 粗细 */ 


EF 站 


。 HTML 文件 edu 7 2 _5.html 


1 = eda 7 之 -al ==> 
2 <!doctype html> 
3 <html lang="en"> 





























4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 链 接 外 部 样式 (External Style) </title> 
二 <link type="text/css" rel="stylesheet" href="out.css"> 
8 </head> 
9 <body> 
10 <hl class="int_css"> 这 个 标题 hi1 使 用 了 链 入 外 部 样式 中 的 类 样式 。</h1> 
证 <hl id="h1l_css"> 这 个 标题 h1 使 用 链 入 外 部 样式 中 的 ID 样式 。</h1> 
1 <h1> 这 个 标题 h1 没 有 使 用 样式 。</h1> 
33 </body> 
14 </html> 
2 
这 个 标题 hl 使 用 了 链接 外 部 样式 中 的 类 样式 。 
这 个 标题 hl 使 用 链接 外 部 样式 中 的 ID 样 式 。 
这 个 标题 hl 没有 使 用 样式 。 
图 7-5 链接 外 部 样式 表 
(3) 代码 解释 。 


代码 中 第 7 行 在 head 标记 中 插入 link 标记 链接 外 部 样式 表 文件 out.css， 属 性 href 的 
值 为 CSS 文件 的 路 径 ， 可 以 是 绝对 路 径 或 相对 路 径 。 第 10 行 引 用 了 外 部 样式 表 中 定义 的 
类 选择 器 int_css， 该 hl 标题 字样 式 生 效 。 第 11 行 引用 了 外 部 样式 表 中 定义 的 ID 选择 器 
元 1_css， 该 hl 标题 字样 式 生 效 。 


CSS 矢 束 
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2) 导入 外 部 样式 表 

(1) 基本 语法 。 

<style type="text/css"> 
Q@import url ("外 部 样式 表 文 件 1 名 称 ") ; 
Q@import url ("外 部 样式 表 文件 2 名 称 ") ; 
选择 器 1 {属性 1: 属性 值 1 ; 属性 2: 属性 值 2; . . .} 
选择 器 2 {属性 1: 属性 值 1; 属 性 2: 属性 值 2; . . .1} 


选择 器 n {属性 1: 属性 值 1 ; 属性 2: 属性 值 2; . - .} 
</style> 
(2) 语法 说 明 。 
。 导入 样式 表 必 须 在 style 标记 内 开头 的 位 置 定义 , 可 以 同时 导入 多 个 外 部 样式 表 , 每 
条 语句 必须 以 “;” 结 束 。 一 般 导 入 外 部 样式 写 在 最 前 面 ， 内 部 样式 写 在 后 面 。 
s。“@import” 必 须 连 续 书写 ， 即 “@” 和 “import” 之 间 不 能 留 有 任何 空格 。 
。 url (“外 部 样式 表 文 件 名 称 ”) 中 的 文件 名 称 必须 是 全 称 ， 含 后 缀 名 .css， 如 out.css。 
【 例 7-2-6】 导 入 外 部 样式 表 的 使 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 7-6 所 示 。 





Da FED Ey 


这 个 标题 hi 使 用 了 导入 外 部 样式 表 中 的 类 样式 (int_ess)。 


过 个 夺 EN2 能 历 内 形式 办 MDRECN2 crs) 
这 个 标题 hz 没有 使 用 样式 ，outl.css 和 out2.css 未 定义 。 














7-6 ”导入 外 部 样式 表 


1 <!-- edu 7 2 6.html --> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

入 <meta charset="UTF-8"> 

6 <title> 导 入 外 部 样式 (External Style) </title> 
过 <style type="text/css"> 

8 @import url("out.css"); 


9 @import url("outl.css"); 

10 @import url("out2.css"); 

生生 #h2_csst{ 

12 font-size:24px; /* 定 义 字 体 大 小 */ 

13 font-style:italic; /* 定 义 字体 样式 */ 

14 } 

区 </style> 

16 </head> 

13 <body> 

18 <hl class="int _css"> 这 个 标题 h1 使 用 了 导入 外 部 样式 表 中 的 类 样式 (int css)。 
</h1> 

19 <h2 id="h2_css"> 这 个 标题 h2 使 用 内 部 样式 中 的 ID 样 式 (h2_css)。</h2> 

20 <h2> 这 个 标题 h2 没 有 使 用 样式 ，out1 .css 和 out2.css 未 定义 。</h2> 

21 </body> 

22 </html> 

(3) 代码 解释 。 


代码 中 第 8 行 一 第 10 行 通过 “@import” 导 入 三 个 外 部 样式 表 文 件 ， 分 别 是 out.css、 


outl.css、out2.css。 第 18 行 引用 导入 外 部 样式 表 中 的 类 选择 器 int css， 第 19 行 引用 内 部 
样式 表 中 的 ID 样式 h2_ css， 第 20 行 是 默认 样式 。 
外 部 样式 表 与 内 联 样式 表 和 内 部 样式 表 相 比 ， 具 有 以 下 优点 : 
。 便于 复 用 。 一 个 外 部 CSS 文件 所 定义 的 样式 ， 可 以 被 多 个 网 页 共用 。 
。 便于 修改 。 修 改 样式 只 需要 修改 CSS 文件 ， 无 须 修改 每 个 网 页 。 
。 提高 显示 速度 。 样 式 写 在 网 页 里 ， 网 页 文件 变 “ 胖 ”， 增 加 网 页 传输 的 负担 ， 降 低 
网 页 显示 速度 。 如 果 某 CSS 文件 已 被 某 网 页 引用 并 加 载 ， 则 其 他 需要 引用 该 CSS 
文件 的 网 页 时 可 以 从 缓存 中 直接 读 取 该 CSS 文件 ， 从 而 提高 网 页 显示 速度 。 


7.3 CSS 继承 与 层 垒 


CSS 继承 即 子 标 记 会 继承 父 标 记 的 所 有 样式 风格 ， 并 且 可 以 在 父 标记 样式 风格 的 基础 
上 再 加 以 修改 ， 产 生 新 的 样式 ， 而 子 标记 的 样式 风格 完全 不 影响 父 标记 。 值 得 注意 的 是 ， 
并 不 是 所 有 的 属性 都 会 自动 传 给 子 元 素 ， 有 的 属性 不 会 继承 父 标记 的 属性 值 ， 例 如 边框 属 
性 就 是 非 继承 的 。 

CSS 的 全 称 是 “ 层 又 样式 表 ”， 层 县 特性 和 “继承 ”不 一 样 ， 可 以 把 层 又 特性 理解 成 
“冲突 ”的 解决 方案 ， 即 对 同一 内 容 设置 了 多 个 不 同类 型 样式 产生 冲突 时 的 处 理 ，CSS 规 
定 如 下 优先 级 为 : 行内 样式 > id 样式 > class 样式 > 标记 样式 。 

【 例 7-3-1】CSS 的 继承 与 层 倒 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 7-7 所 示 。 


二 可 Ei 
De wenm 2 Pp- cx] SazsSR m ce 


地 时 bedy 的 本 内 而 
入 一 各 了 ph 涩 7H bey 


第 二 、 三 、 四 段 都 设置 了 class="c1"。 
第 三 段 设置 了 id= pl“。 

行内 样式 style="font-family:"Arial Black'; 
color:red;"， 优 先 级 最 高 



















图 7-7 CSS 继承 与 层 倒 


1 <!== edu 7 3 1.htal = 一 > 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <tit1le> 继 承 与 层 登 < 人 title> 

7 <style type="text/css"> 

8 body{ font-size:12px; }/* 元 素 样式 */ 

9 -cl{ font-size:28px; color:blue;font-family:" 黑 体 "; }/*class 样 式 */ 

10 #p1,#p2{ font-family:" 幼 圆 "; font-size:36px;}/*id 样 式 */ 

1 </style> 

二 全 </head> 第 

13 <body> 

14 这 是 body 的 文本 内 容 。 7 
章 
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15 <p> 第 一 段 子 标记 p 继 承 了 父 标记 body 的 样式 。</p> 

16 <p class="c1"> 第 二 、 三 、 四 段 都 设置 了 class="c1"。</p> 

yy <p class="cl” id="p1"> 第 三 段 设 置 了 id="p1"。</p> 

18 <p class="cl" id="p2" style="font-family: "RARrial Black';color: 
red; "> 行内 样式 style="font-family:'Arial Black'; color:red;"， 优先 
级 最 高 。</p> 

19 </body> 

20 </html> 

代码 解释 


代码 中 第 15 行 定义 段落 p 标记 与 body 中 的 文本 样式 一 致 ， 说 明 它 继承 了 第 8 行 所 设 
置 的 其 父 标 记 样式 。 第 16 一 18 行 定 义 的 三 个 段落 p 标记 均 设置 了 class 属性 ， 根 据 显示 效 
果 , 说 明 class 样式 的 优先 级 高 于 标记 样式 。 第 17 行 设置 段落 p 标记 的 id 和 class 属性 。id 
样式 修改 了 字体 为 幼 圆 、 字 号 为 36px， 说 明 样式 得 到 了 应 用 ， 但 颜色 并 没有 发 生变 化 ， 说 
明 id 样式 优先 级 高 于 class 样式 。 第 18 行 定义 的 段落 p 标记 ， 同 样 设置 了 id 属性 ， 同 时 
增加 了 行内 样式 设置 , 效果 显示 其 字号 为 36px, 说 明 id 样式 得 到 了 应 用 , 但 字体 变 为 Arial 
Black， 而 不 是 幼 圆 ， 说 明 行 内 样式 优先 级 高 于 id 样式 ， 字 的 颜色 变 为 红色 ， 说 明 行 内 样 
式 优先 级 高 于 class 样式 ， 即 行内 样式 的 优先 级 最 高 。 


7.4 综合 实例 


设计 Web 页 面 时 使 用 CSS 来 控制 显示 ， 将 会 使 得 页 面 结构 清晰 、 代 码 量 大 大 减少 ， 
而 且 便 于 维护 ， 作 为 从 事 Web 前 端 开发 的 工程 师 应 该 养 成 使 用 CSS 实现 页 面 内 容 和 表现 
分 离 的 编程 习惯 ， 并 在 实践 中 不 断 探 索 。 

以 “Hoverbox 图 像 画廊 ”(Hoverbox Image Gallery) 为 例 ， 利 用 链接 外 部 样式 表 
hoverbox.css 控制 以 无 序列 表 方 式 排列 的 5 行 X4 列 共 20 幅 图 像 的 样式 ， 通 过 鼠标 在 某 个 
图 像 上 盘旋 ， 实 现 大 图 像 浏 览 。 本 例 对 原 代码 和 样式 文件 进行 了 适当 简化 。 

【 例 7-4-1】Hoverbox 图 像 画 廊 程 序 。 实 现代 码 如 下 所 示 ， 页 面 效果 如 图 7-8 所 示 。 
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鼠标 经 过 图 片 显示 大 图 (Hoverbox Image Gallery) 
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图 7-8 鼠标 经 过 图 片 显示 大 图 


。 主 程序 edu 7 _4_1.html。 


1 
2 
3 


Ppp 
AWNPOLWOoOJAUMD 


<!-- edu 7 4 1.html --> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Hoverbox Image Gallery</title> 
<link type="text/css" rel="stylesheet" href='hoverbox.css' /> 
</head> 
<body> 
<div id="" class=""> 
<h1> 鼠 标 经 过 图 片 显示 大 图 (Hoverbox Image Gallery)</h1> 
<ul class="hoverbox"> 
<li><a href="#"> 
<img src="img/photo01.jpg" alt="description" class= 
"preview" /> 
<img src="img/photo01.jpg" alt="description" /></a> 








«fi> 
<li><a href="#"> 
<img src="img/photo02.jpg" alt="description" class= 


"preview" /> 

<img src="img/photo02.jpg" alt="description" /></a> 
</1i> 

<li><a href="#"> 

<img src="img/photo03.jpg" alt="description" class= 
"preview" /> 

<img src="img/photo03.jpg" alt="description" /></a> 


</1i> 
<li><a href="#"> 
<img src="img/photo04.jpg" alt="description" class= 





"preview" /> 
<img src="img/photo04.jpg" alt="description" /></a> 
</1i> 
<1i><a href="#"> 
<img src="img/photo05.jpg" alt="description" class= 
"preview" /> 
<img src="img/photo05.jpg" alt="description" /></a> 
</1i> 
<li><a href="#"> 
<img src="img/photo06.jpg" alt="description" class= 
"preview" /> 
<img src="img/photo06.jpg" alt="description" /></a> 
</1i> 
<li><a href="#"> 
<img src="img/photo07.jpg" alt="description" class= 
"preview" /> 

<img src="img/photo07.jpg" alt="description" /></a> 
</1i> 
<li><a href="#"> 
<img src="img/photo08.jpg" alt="description" class= 
"preview" /> 

<img src="img/photo08.jpg" alt="description" /></a> 
</li> 
<li><a href="#"> 
<img src="img/photo09.jpg" alt="description" class= 
"preview" /> 

<img src="img/photo09.jpg" alt="description" /></a> 
</1i> 
<li><a href="#"> 
<img src="img/photo10.jpg" alt="description" class= 
"preview" /> 
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51 
52 
53 
54 
55 
56 


<img src="img/photo10.jpg" alt="description" /></a> 


</1i> 
</ul> 
</div> 
</body> 
</html> 


。 CSS 外 部 样式 文件 hoverbox.css。 


/* hoverbox.css */ 

站 /* 全 局 声明 */ 
border: 0; 
margin: 0; 
padding: 0; 


/* =Basic HTML, Non-essential 


text-decoration: none;} 
divt{ 
width:720px; 
height:500px; 
margin:0 auto; 
padding:30px; 
text-align:center; 
} 
body{ 
position: relative; 
text-align:center; 
} 
hl{ 
background: inherit; 
border-bottom: lpx dashed #097; 
color: #000099; 
font: 17px Georgia, serif; 
margin: 0 0 10px; 
padding: 0 0 35px; 
text-align: center; 


: 


/* =Hoverbox Code 


.hoverbox{cursor: default;list-style: 


.hoverbox a{cursor: default;} 
.hoverbox a .preview{display: none;} 
.hoverbox a:hover .preview!{ 

display: block; 


position: absolute; 
top: =33pxs 
left: -45px; 


z-index: 1; 

} 

-hoverbox imgt{ 
background: #fff; 
border-color: #aaa #ccc 
border-style: solid; 
border-width: lpx; 
color: inherit; 


/* 定义 内 容 居 中 显示 


/* 定义 hl 的 样式 
/* 定义 背景 属性 取 值 为 继承 */ 


#ddd #bbb; 


/* 定义 图 层 的 样式 */ 


ny 


/* 定义 主体 样式 */ 
/* 位 置 属性 为 相对 的 */ 


bd 


none; } /* 去 掉 列表 项 前 的 符号 */ 


/* 大 图 初始 加 载 为 不 显示 
/* 派生 选择 器 声明 */ 
/* 以 块 方式 显示 */ 

/* 以 绝对 方式 显示 ， 图 可 以 层 倒 */ 
/* 相对 当前 位 置 偏 移 量 */ 

/* 相对 当前 位 置 偏 移 量 */ 

/* 表示 在 上 层 〈 原 小 图 在 底层 ) */ 


bd 


/* 定义 图 像样 式 */ 


48 padding: 2px; 


49 vertical-align: top; 

50 width: 100px; 

生生 height: 75px; 

S52 1} 

53 .hoverbox 1if{ /* 定义 列表 项 样式 */ 

54 background: #eee; /* #eee 等 同 于 #eeeeee, 以 下 格式 相同 */ 


55 border-color: #ddd #bbb #aaa #ccc; 
56 border-style: solid; 


57 border-width: lpx; 

58 color: inherit; 

59 float: left; /* 设置 图 像 向 左 浮动 */ 
60 display: inline; /* 设置 为 行内 显示 */ 


61 margin: 3px; 
62 padding: 5px; 


63 position: relative; /* 位 置 为 相对 的 方式 */ 
64 1} 
65 .hoverbox .preview{ /* 定义 大 图 样式 */ 


66 border-color: #000; 
67 width: 200px; 
68 height: 150px; 


70 ul{padding:40px;margin:0 auto; } /* 定义 ul 样式 */ 


代码 解释 

代码 中 第 10 一 54 行 在 div 中 插入 一 个 无 序列 表 ， 并 在 无 序列 表 中 插入 10 个 列表 项 ， 
在 每 一 个 列表 项 中 插入 两 个 图 像 超 链接 ， 其 中 一 个 图 像 在 初始 加 载 时 通过 .hoverbox 
a .preview 样式 实现 不 显示 ， 当 鼠标 在 某 一 小 图 像 上 盘旋 时 通过 在 hoverbox.css 中 设置 
position 和 z-index 属性 的 值 来 实现 图 像 层 登 ， 显 示 出 大 图 像 。 本 例 仅 显示 10 幅 图 像 , 分 两 
行 显示 。 

原始 Hoverbox 图 像 画 廊 页 面 http://host.sonspring.com/hoverbox/。 


本 章 小 结 


本 章 介 绍 了 CSS 的 基本 概念 以 及 如 何 使 用 CSS 控制 网 页 显示 。 

CSS 规则 由 选择 器 和 声明 组 成 ， 声 明 即 “属性 :属性 值 ” 对 。 选 择 器 包括 id 选择 器 、 
类 选择 器 、 标 记 选 择 器 、 伪 类 选择 器 及 属性 选择 器 等 ,提供 了 不 同 的 选取 页 面 标 记 的 方式 。 

根据 CSS 规则 定义 的 位 置 不 同 ， 将 CSS 分 为 内 联 样式 表 、 内 部 样式 表 、 链 接 外 部 样 
式 表 以 及 导入 外 部 样式 表 , 其 中 内 联 样式 表 是 在 标记 内 设置 style 属性 , 且 仅 对 该 标记 有 效 ; 
内 部 样式 表 是 在 页 面 的 head 标记 中 加 入 style 标记 , 在 style 标记 里 编写 CSS 规则 , 它 对 整 
个 页 面 都 有 效 ; 外 部 样式 表 是 将 CSS 规则 写 在 单独 的 文件 里 ， 要 求 该 文件 的 后 级 名 为 .css， 
称 为 CSS 文件 ， 需 要 应 用 规则 的 页 面 ， 通 过 link 标记 或 者 “@import” 语 句 将 独立 的 CSS 
文件 引入 到 页 面 中 ， 前 者 称 为 链接 外 部 样式 表 ， 后 者 称 为 导入 外 部 样式 表 。 

CSS 继承 性 表明 子 标记 将 继承 父 标记 的 规则 ，CSS 层 县 特性 约定 了 规则 冲突 的 解决 方 
案 。CSS 规定 样式 优先 级 从 高 到 低 为 : 行内 样式 > id 样式 > class 样式 > 标记 样式 。 


CSS 喜 矶 
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练习 与 实验 
练习 7 

1. 选择 题 
(1) CSS 的 规则 是 由 选择 器 和 ) 构成 的 。 

(A) 声明 (B) 属性 (C) 值 (D) 属性 选择 器 
(2) 下 列 选项 中 CSS 规则 书写 正确 的 是 加 

(A) body:color=black (B) {body;color:black;} 

(C) body{colorblack:} (D) {body:color=black;} 
(3) 下 列 选项 中 正确 定义 所 有 h3 标记 内 文字 为 特 粗 的 是 3 


(A) <h3 style= " font-size:bolder; " > 
(B) <h3 style= " font-weight:bolder; " > 
(C) h3 {font-size:bolder:} 
(D) h3 {font-weight:bolder:} 
(4) 在 CSS 中 定义 能 多 次 引用 样式 的 选择 器 是 3 








(A) 超 链 接 选 择 器 (B) 类 选择 器 
(C) id 选择 器 (D) 标记 选择 器 
(5) 下 列 选项 中 样式 优先 级 最 高 的 是 )。 
(A) 标记 样式 (B) id 样式 (C) class 样式 ”〈(D) 行内 样式 
(6) 下 列 选 项 中 导入 外 部 样式 表 正 确 的 是 〈 入 
(A) @import url("chul2015.css ") (B) @import" chu2015.css " 
(C) <lik href=" chul2015.css "/> (D) @import url("chul2015.css "); 
2. 填空 题 
(1) 在 CSS 文件 中 ， 用 元 1f}， 在 HTML 中 p 标记 内 使 用 属性 引用 样式 ; 在 
CSS 中 使 用 .p2 了 定义 样式 ， 在 HTML 中 p 标记 内 使 用 属性 来 引用 样式 。 
(2) 引用 外 部 CSS 文件 有 两 种 方式 : 一 是 通过 标记 的 属性 ; 二 是 通过 
标记 内 来 引用 。 
(3) CSS 文件 的 扩展 名 为 
3. 简 答 题 


(1) 简 述 属性 选择 器 有 几 种 定义 方式 。 

(2) CSS 按照 其 定义 位 置 可 分 为 哪 几 种 ? 分 别 如 何 使 用 ? 
(3) 如 何 理解 CSS 的 继承 与 冲突 特性 ? 

(4) 简 述 id 选择 器 与 类 选择 器 的 异同 点 。 


实验 7 


1. 使 用 内 联 样式 表 及 内 部 样式 表 ， 设 计 如 图 7-9 所 示 的 页 面 。 设 计 要 求 如 下 : 
(1) 使 用 标题 字 和 段落 标记 进行 文字 显示 , 在 内 部 样式 表 中 定义 body 标记 内 信息 “ 居 


中 显示 ” 定义 p 标记 字体 为 “隶书 ”。 
(2) 通过 p 标记 的 style 属性 定义 字体 大 小 属性 〈font-size) 的 值 分 别 为 150%、200%、 
250%。“ 朝 辞 白 帝 彩云 间 , ”不 定义 任何 样式 。 


早 发 自 帝 城 
mw 


MS 


千里 江 辽 一 日 还 。 
两 岸 殖 声 哮 不 住 ， 
轻舟 已 过 万 重山 。 


7-9 古诗 排版 效果 图 














2. 按 如 下 要 求 设计 “Web 前 端 开发 工程 师 工 作 内 容 ” 页 面 ， 设 计 如 图 7-10 所 示 的 页 
面 。 要 求 如 下 : 

(1) 页 面 标题 为 : Web 前 端 开发 工程 师 工作 内 容 ; 

(2) 页 面 题 目 : 1 号 标题 字 显 示 “Web 前 端 开发 工程 师 工作 内 容 ” 3 号 标题 字 显示 
“Web 前 端 工程 师 在 不 同 的 公司 ， 会 有 不 同 的 职能 ， 但 称呼 都 是 类 似 的 。”; 

(3) 采用 无 序列 表 显示 工作 内 容 ， 分 四 个 方面 ， 分 别 是 “做 网 站 设计 、 网 页 界面 开发 
“做 网 页 界面 开发 ”““ 做 网 页 界面 开发 、 前 台数 据 绑 定 和 前 台 逻 辑 的 处 理 ”“ 设 计 、 开 发 、 数 
据 处 理 ” 每 一 个 列表 项 显示 一 种 不 同 风格 的 工作 内 容 ， 其 中 第 一 个 列表 项 ID (il) 样式 
为 “和 斜体、 加 粗 、24px、 黑 体 ” 第 二 个 列表 项 类 (1i2) 样式 为 “背景 色 #9999cc、 字 符 间 
距 lpx” 第 三 个 列表 项 ID (1i3) 样式 为 “ 字 大 小 18px、 颜 色 红 色 ” 第 四 个 列表 项 行内 样 
式 “ 颜 色 #0000cc、 背 景色 #c0c0c0、 素 书 ”; 

(4) 定义 全 局 样式 为 “楷体 、 蓝 色 ”。 


| web 前 端 工程 师 在 不 同 的 公司 ， 会 有 不 网 的 职能 ， 但 称 叶 都 是 类似 的 。 








7-10 Web 前 端 开发 工程 师 工 作 内 容 
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本 章 学 习 目标 


在 网 页 设计 过 程 中 经 常会 需要 对 网 页 进行 分 区 或 切割 成 若干 块 ， 并 在 不 同 的 分 区 或 块 
中 显示 相关 图 、 文 、 表 等 信息 。 除 了 表格 、 框 架 外 ， 还 有 谁 能 胜任 这 项 工作 昵 ? 只 有 图 层 
DIV 可 以 。DIV 就 是 为 了 简化 页 面 布 局 ， 配 合 CSS 完成 精彩 的 页 面 布局 设计 。 本 章 重点 介 
绍 DIV 定义 语法 、 属 性 语法 、 多 DIV 和 DIV 赃 套 布局 等 方面 的 知识 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 
掌握 DIV 标记 的 基本 用 法 、 常 用 属性 。 
理解 DIV 赃 套 与 层 堆 的 含义 。 
掌握 SPAN 标记 的 语法 ， 灵 活 使 用 SPAN 标记 。 
掌握 DIV 与 SPAN 标记 在 使 用 上 的 差异 。 
学 会 使 用 div+CSS 进行 和 简易 页 面 布局 。 


8.1 DIV 图 层 


图 层 是 设计 网 页 时 用 于 定位 元 素 或 者 布局 的 一 种 技术 ， 它 可 以 将 图 层 里 包含 的 内 容 放 
置 到 浏览 器 的 任意 位 置 ， 其 包含 的 内 容 有 文字 、 图 像 、 动 画 甚至 是 图 层 。 在 一 个 网 页 文件 
中 可 以 使 用 多 个 图 层 ， 图 层 可 以 嵌 套 、 重 又 ， 图 层 布局 比 表格 的 布局 更 加 灵活 。 

8.1.1 DIV 定义 


div (division/Section) 是 分 区 或 分 节 的 意思 ， 这 意味 着 它 的 内 容 自 动 地 开始 一 个 新 行 。 
图 层 div 标记 是 一 个 块 级 标记 ， 可 定义 文档 中 的 分 区 或 节 。 可 以 通过 <div> 的 class 或 id 应 
用 额外 的 样式 。div 标记 是 成 对 标记 ， 以 <div> 开 始 ， 以 </div> 结 束 。 

1. 基本 语法 

<div id="" class="" style=""> 块 包含 的 内 容 </div> 

2. 语法 说 明 

div 标记 的 属性 、 取 值 及 说 明 如 表 8-1 所 示 。 

表 8-1 div 标记 的 属性 、 取 值 及 说 明 

















属 性 值 说 明 
id id 规定 元 素 的 唯一 id 
class classname 规定 元 素 的 类 名 (classname) 
style style_definition 规定 元 素 的 行内 样式 (inline style) 


style 属性 : 设置 图 层 的 样式 ， 未 定义 前 通过 浏览 器 查看 不 到 效果 。 图 层 style 属性 的 
取 值 可 以 由 多 个 “属性 /属性 值 ” 对 构成 。 其 中 主要 属性 有 : 
position 属性 一 一 定义 图 层 的 定位 方式 ， 有 static、fixed、relative、absolute 四 个 属 
性 值 。 常 用 relative 和 absolute。 若 指定 为 static 时 ，div 遵循 HTML 规则 ; 若 指定 
为 relative 时 , 可 以 用 top、left 来 设置 div 在 页 面 中 的 偏 移 , 但 是 此 时 不 可 使 用 层 鱼 ; 
车 指定 为 absolute 时 ， 可 以 用 top、left 对 div 进行 绝对 定位 ; 若 指定 为 fxed 时 , 在 
IE7 以 上 与 FireFox 中 div 的 位 置 相对 于 屏幕 固定 不 变 ， 在 IE6 中 没有 效果 。 
left、top 属性 一 一 定义 图 层 左 上 角 位 置 (左边 距 和 上 边 距 )。 
width、height 属性 一 一 定义 图 层 的 宽度 和 高 度 。 
float 属性 一 一 设置 图 层 的 浮动 位 置 ， 可 以 向 左 、 向 右 浮动 或 不 浮动 。 
clear 属性 一 一 清除 图 层 内 浮动 , 与 浮动 属性 是 一 对 作用 相反 的 属性 。 可 以 清除 向 左 、 
向 右 、 左 右 两 边 浮动 或 允许 浮动 。 
z-index 属性 一 一 设置 图 层 的 层 倒 的 上 、 下 层 关系 , 设置 此 属性 以 实现 多 个 图 层 层 爸 
的 效果 。z-index 值 越 大 ， 图 层 的 位 置 越 高 。 子 层 始终 位 于 父 层 之 上 。 
div 标记 的 style 属性 的 取 值 中 属性 、 取 值 及 说 明 表 如 表 8-2 所 示 。 


表 8-2 div 标记 的 style 属性 取 值 中 属性 、 值 及 说 明 表 








属 性 值 说 ” 明 
static 表示 静态 定位 ， 默 认 设置 
absolute 表示 绝对 定位 ， 与 位 置 属 性 配合 使 用 
i relative 表示 相对 定位 ， 图 层 不 可 层 芝 
fixed 表示 图 层 位置 固 定 ， 不 滚动 
border 线 粗细 线 型 线 颜色 边框 ， 可 以 设置 风格 、 粗 细 、 颜 色 等 属性 
background-color | rgb0| 十 六 进 制 数 | 英文 颜色 名 | 背景 颜色 
left pixes|% 规定 图 层 左 边 距 离 
top pixes|% 规定 图 层 与 顶部 的 距离 
width pixes|% 规定 图 层 的 宽度 
height pixes|% 规定 图 层 的 高 度 
float leftlrightlnone 允许 浮动 元 素 在 左边 、 右 边 及 不 浮动 
clear leftrightlbothlnone le 和 有 过、 在 有 两 过 的 主动 和 介 
. 表示 子 图 层 会 按照 父 层 的 属性 显示 | 无 单位 的 整数 
Z-index auto| 数 字 或 负数 
strolll visible 内 容 溢出 控制。 分 别 表示 始终 显示 滚动 条 、 不 显 
overflow 示 滚 动 条 ， 但 超出 部 分 可 见 、 内 容 超 出 时 显示 滚 
| 动 条 、 超 出 时 隐藏 内 容 
display blocklinlinelnone 表示 按 块 元 素 显示 、 行 内 方式 显示 和 隐藏 等 


8.1.2 DIV 应 用 


div 标记 通常 设置 id 或 class 属性 来 引用 定义 的 样式 ， 把 文档 分 割 为 独立 的 、 不 同 的 部 


分 ， 对 文档 进行 布局 。 


【 例 8-1-1】div 标记 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 8-1 所 示 。 
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1 <!-- edu 8 1 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <style type="text/css"> 视频 讲解 

第 -inline div{ display:inline; } 

8 #divl{ background-color:green; 

9 width:300px;height:100px; float:left; } 
10 #div3{ background-color:yellow; color:black; 
11 font-size:200%; clear:both;} 

12 </style> 

13 </head> 

14 <body> 

15 <div id="divl" class="inline div"> 这 是 div1</div> 
16 <div class="inline div"> 这 是 div2</div> 

4 了 <div id="div3"> 这 是 div3</div> 

18 </body> 

19 </html> 


上 述 代码 中 使 用 了 三 个 div 标记 ， 从 页 面 效果 可 以 看 出 div 是 块 标记 ， 可 以 用 来 作文 
档 分 块 ，div1 与 div2 在 一 行 显示 ， 说 明 通 过 设置 display 属性 可 以 改变 其 固有 的 性 质 。 


i | 
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图 8-1 div 使 用 


8.2 ”图 层 酝 套 与 层 琶 


在 图 层 中 不 仅 可 以 包含 文字 、 图 像 、 动 画 等 内 容 ， 还 可 以 包含 其 他 的 图 层 ， 称 为 图 层 
的 内 套 。 图 层 与 图 层 之 间 可 以 不 相交 , 也 可 以 重合, 这 就 给 页 面 布局 带 来 了 很 大 的 灵活 性 ， 
所 以 在 设计 网 页 时 首先 应 设计 好 页 面 的 结构 ， 理 清 图 层 与 图 层 之 间 的 关系 。 


8.2.1 DIV 诅 套 


多 个 div 既 可 以 单独 使 用 ， 也 可 以 互相 包含 ， 嵌 套 使 用 。 一 方面 可 以 将 页 面 分 割 成 不 
同 的 块 ， 块 与 块 之 间 没 有 包含 关系 ; 另 一 方面 又 可 以 把 功能 相近 的 块 组 织 到 一 个 更 大 的 块 
中 ， 便 于 整体 控制 ， 即 图 层 嵌 套 。 

【 例 8-2-1】div 的 嵌 套 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 8-2 所 示 。 


di ==> 
<!doctype html> 

<html lang="en"> 

<head> 


<meta charset="UTF-8"> 





心 wN 


6 <style type="text/css"> 

7 .inline div{display:inline-block;/* 行内 显示 方式 */ } 

8 #wrap{ width:450px;height:250px; border:2px solid black;} 
9 #d1,#d2{height:100px; width:40%; background-color: green; 
10 margin:20px; } 

和 #d2{background-color:yellow; } 

42 #d3{height:100px; width:90%; border:2px solid black; 

13 background-color:#66ff33; margin:0 auto; } 

14 h3{font-size:28px;color:#0033ff;} 

了 二 </style> 

16 </head> 

17 <body> 

18 <h3> 图 层 赚 套 的 应 用 </h3> 

19 <div id="wrap"> 

20 <div id="d1l" class="inline div">divl</div> 

21 <div id="d2" class="inline div">div2</div> 

22 <div id="d3">div3</div> 

23 </div> 

24 </body> 

25 </html> 


上 述 代 码 中 使 用 四 个 div 标记 演示 其 嵌 套 关系 ， 外 层 <div id="wrap"> 里 面包 含 三 个 


<div>， 其 中 <div id="d1"> 与 <div id="d2"> 在 同一 行 ，<div id="d3"> 在 第 二 行 。 










| | @ we/FYWebmRg 寺 六 丰 -项 3 版 -20170518/ 驯 子 宇 4 有 下 天 /cha/edu_a_2_.1html 姜 | 二 


图 层 嵌 套 的 应 用 


8-2 div 典 套 

















8.2.2 ”DIV 层 又 


多 个 div 除了 可 以 相互 嵌 套 外 ， 还 可 以 层 登 。div 层 释 必须 首先 将 position 属性 设置 为 


absolute， 然 后 利用 z-index 属性 控制 层 登 关系 。 
【 例 8-2-2】div 的 层 琶 。 代 码 如 下 所 示 ， 页 面 效果 如 图 8-3 所 示 。 


= da 2 2 En ==> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <style type="text/css"> 

和 body{margin:0; /*margin 表 示 边 界 */ } 

8 div{position:absolute; /* 定位 方式 为 绝对 定位 */ 
9 width:200px;height:200px; » 

0 


1 #d1 {background-color:black;color:white; 
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站 z-index:0; ”/* 该 图 层 在 最 下 面 */ } 

3 #d2{background-color:red;top:25px; left:50px; 
13 z-index:1; ”/* 该 图 层 在 中 间 */ ,| 

14 #d3{ background-color:yellow; top:50px; left:100px; 
15 z-index:2; ”/* 该 图 层 在 最 上 面 */} 

16 </style> 

4 </head> 

18 <body> 

19 <div id="dl" >divl</div> 

20 <div id="d2" >div2</div> 

21 <div id="d3" >div3</div> 

22 </body> 

23 </html> 














图 8-3 div 层 和 登 


上 述 代 码 中 使 用 了 三 个 div 标记 ，div 标记 position 属性 值 为 absolute〈 绝 对 定位 )， 再 
设置 div 标记 的 宽度 与 高 度 ， 在 子 图 层 中 定义 top、left 等 属性 的 值 对 其 进行 偏 移 定 位 ， 多 
个 div 就 可 能 重合 ， 通 过 z-index 属性 设置 其 层 琶 关系 ， 运 行 效 果 说 明 z-index 值 最 大 的 图 
层 位 于 最 上 方 。 


8.3 div 标记 与 span 标记 


在 使 用 CSS 排版 的 页 面 中 , div 标记 和 span 标记 是 两 个 常用 的 标记 。 利用 这 两 个 标记 ， 
加 上 CSS 对 其 样式 的 控制 ， 可 以 很 方便 地 实现 各 种 效果 。 

1，span 标记 的 使 用 

div 标记 是 区 块 (block-level) 容器 标记 ， 可 以 容纳 段落 、 标 题 、 表 格 、 图 像 等 各 种 HIML 
元 素 。 只 需 对 div 标记 进行 样式 控制 ， 就 可 以 对 div 内 包含 的 各 种 元 素 进行 样式 控制 。div 
标记 包含 的 元 素 会 自动 换行 。 

span 标记 是 行内 标记 ， 也 是 行内 元 素 (inline element)， 同 样 可 以 包含 HTML 的 各 种 
元 素 ， 只 不 过 其 元 素 会 在 一 行内 显示 。 在 它 前 后 不 会 自动 换行 。span 标记 没有 结构 上 的 意 
义 ， 纯 粹 是 应 用 样式 ， 当 其 他 行内 元 素 都 不 适合 时 ， 就 可 以 使 用 span 元 素 。 

1) 基本 语法 

<span id=" 样 式 名 称 "” class=" 样 式 名 称 ">..</span> 


2) 语法 说 明 
如 果 不 给 span 标记 应 用 样式 ， 那 么 span 标记 包含 的 元 素 不 会 有 任何 视觉 上 的 变化 ， 


只 有 应 用 样式 后 ， 才 会 有 效果 。 

2. div 与 span 标记 的 区 别 

div 和 span 标记 默认 情况 下 都 没有 对 标记 内 的 内 容 进 行 格式 化 或 泻 染 ， 只 有 使 用 CSS 
来 定义 相应 的 样式 时 才 会 显示 出 不 同 。 

(1) 是 否 是 块 标记 。div 标记 是 块 标 记 ， 一 般 包含 较 大 范围 ， 在 区 域 的 前 后 会 自动 换 
行 ; 而 span 标记 是 行内 标记 , 一 般 包含 范围 较 窗 , 通常 在 一 行内 , 在 区 域外 不 会 自动 换行 。 

(2) 是 否 可 以 互相 包含 。 一 般 来 说 ，div 标记 可 以 包含 span 标记 ， 但 span 标记 不 可 以 
包含 div 标记 。 

但 是 块 标记 和 行 标记 不 是 绝对 的 , 通过 定义 CSS 的 display 属性 可 以 相互 转化 , display 
属性 的 取 值 如 表 8-3 所 示 。 


表 8-3 display 属性 的 取 值 及 说 明 表 


属 性 值 说 明 


none 此 元 素 不 会 被 显示 





inline 将 对 象 设置 为 行内 元 素 ， 在 行内 显示 

block 将 对 象 设置 为 块 级 元 素 ， 以 块 状 显 示 ， 自 动 换行 
inline-block 将 对 象 设置 为 行内 块 标记 

inherit 规定 应 该 从 父 元 素 继承 display 属性 的 值 





【 例 8-3-1】 块 元 素 和 行 元 素 的 相互 转化 ， 代 码 如 下 所 示 ， 页 面 效果 如 图 8-4 所 示 。 


1 <!-- edu 8 3 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 3 
5 <meta charset="UTF-8"> > 

6 <style type="text/css"> 视频 讲解 
学 div{background-color:#f6f6f6;color:#000000; 

8 height:2em;margin:2px; /*margin 表 示 边 界 */} 

9 .inline disp{display:inline; /* 改 变 div 显 示 方 式 */】 

10 .block disp{display:block; /* 改 变 span 显 示 方式 */ 

FE height:4em;background-color:rgb(200,200,200); 

12 margin:2px; /*margin 表 示 边 界 */ } 

13 </style> 

14 </head> 

15 <body> 

16 <div id="d1"> 这 是 div1</div> 

17 <div id="d2"> 这 是 div2</div> 

18 <span id="s1"> 这 是 span1</span> 

19 <span id="s2"> 这 是 span2</span> 

20 <div id="d3" class="inline disp"> 这 是 div3</div> 

六 <div id="d4" class="inline disp"> 这 是 div4</div> 

22 <span id="s3" class="block disp"> 这 是 span3， 在 使 用 css 排 版 的 页 面 中 ， 


div 标 记 和 span 标 记 是 两 个 常用 的 标记 。 利 用 这 两 个 标记 ， 加 上 Css 对 其 样式 的 控制 ， 
可 以 很 方便 地 实现 各 种 效果 。</span> 
23 <span id="s4" class="block disp"> 这 是 span4， 在 使 用 css 排 版 的 页 面 中 ， 
div 标 记 和 span 标 记 是 两 个 常用 的 标记 。 利 用 这 两 个 标记 ， 加 上 css 对 其 样式 的 控制 ， 








可 以 很 方便 地 实现 各 种 效果 。</span> 第 

24 </body> 8 
25 </html> 
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ly D edu_8_3_1html 
六 CG | @ fileV//FVWeb 前 读 开 发 技术 -第 3 版 -20170518/ 到 学 案例 及 资源 /cha/edu 8 3 1 html 从 | : 














图 8-4 div 与 span 标记 显示 方式 转换 


上 述 代码 中 第 16 一 19 行 说 明了 div 和 span 固有 的 特征 , 即 div 是 块 标记 , span 是 行内 
标记 。 第 20 行 和 第 21 行 说 明 设 置 display 属性 为 inline， 可 以 将 块 标记 div 设置 成 行内 显 
示 ; 第 22 行 和 第 23 行 说 明 设置 display 属性 为 block， 可 以 将 行内 标记 span 改变 成 块 形式 
显示 。 


8.4 综合 实例 
本 例 以 “苏州 百 特 电 器 有 限 公 司 ” 首 页 作为 参照 网 站 ， 如 图 8-5 所 示 ， 使 用 DIV+CSS 


完成 页 面 布局 设计 ， 设 计 效 果 与 原 网 站 (http://www.better-vac.com/) 相似 (省 略图 像 幻灯 
片 播放 部 分 )。 布 局 图 如 图 8-6 所 示 ， 页 面 效 果 如 图 8-7 所 示 。 
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8-5 ”苏州 百 特 电器 有 限 公 司 网 站 首页 


1. 页 面 布 局 规划 
根据 图 8-5 页 面 布局 效果 ， 我 们 很 容易 看 出 这 是 标准 4 行 3 列 布局 样式 。 使 用 布局 绘 
图 软件 画 出 布局 图 ， 如 图 8-6 左 图 所 示 。 
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图 8-6 网 站 设计 div 布局 


2. 写 出 div 结构 代码 
新 建 一 个 HTML 文档 ， 编 写 如 下 的 div 和 内 套 结构 代码 。 
。 header 部 分 的 div 结构 。 


<div id="header" class=""> 
<div id="logo" class=""></div> 
search" class=""></div> 
<div id="nav" class=""></div> 
</div> 





苏州 日 特 电 喜 有 限 公司 网 站 一 ndows Internet Explorer 
全 加 ?vo messenas 国人 +|x| 加 
亦 收 训 六 。 攻 劳 州 百 特 电器 有 限 公司 网 站 | 
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8-7 网 站 仿真 设计 效果 


。 picture 部 分 的 div 结构 。 


<div id="picture" class=""></div> 
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。 mian 部 分 的 div 结构 。 





1 <div id="main" class=""> 

2 <div id="left" class=""></div> 

3 <div id="center" class=""></div> 
4 <div id="right" class=""></div> 
与 /div> 


。 footer 部 分 的 div 结构 。 


<div id="footer" class=""></div> 


3. 编写 best.css 文件 
编写 CSS 文件 ， 定 义 相应 的 ID 样式 ， 形 成 页 面 初步 布局 ， 效 果 如 图 8-6 右 图 所 示 。 


/* best.css */ 
*{font-size:12px;font-family:Times New Roman;color:#828282;} 
body{width:984px;height:800px; 

padding:2px;margin:0 auto;} 
#header{width:984px; height:120px;background:#FFFFFF;} 
#logo{width:199px; height:80px; float:left; 
background:#FFFFFF url("logo.png") no-repeat left bottom;} 
#search{width:785px; height:80px; 
background:#FFFFFF; float:right;} 
10 #nav{clear:both; width:984px; height:40px; background:#EBEBEB;} 
11 #picture{width:984px; height:337px; background:#828282;} 
12 #main{width:984px; height:250px; border-bottom:5px ridge #DEDEDE; } 
13 #left{width:240px;height:200px;background:#EEFFDD; 


ownawm 必 wm 


14 float:left; border-right:10px solid #FFFFFF;} 
15 #center{width:466px;height:200px;float:left; 
16 background:#EEFFDD; border-right:5px solid #FFFFFF;} 


17 #right{width:263px; height:200px;background:#EEFFDD; float:right; } 
18 #footer{clear:both; width:984px; height:40px; background:#F7F7F7; 
19 text-align:center; } 

20 table{text-align:center;line-height:1.5em;} 

21 a:link,a:visited,a:active{text-decoration:none;} 

22 a:link,a:visited,a:active{color:#828282;} 

23 #nav a:hover{color:#Bf0000;text-decoration:none;} 

24 #nav td{width:165px;height:40px; 

25 text-align:center;vertical-align:middle;} 

26 #line{background:url("line.png") no-repeat right center;} 

27 ul{list-style:none;margin-left:10px;line-height:1.8em;} 

28 #left li{border-bottom:1lpx dotted #009900;} 

29 #left a:hover{color:#Bf0000;text-decoration:underline;} 

30 input{vertical-align:middle;padding:2px auto;} 

31 #footer p{margin-top:20px;text-align:center;color:#333333;} 


4. 编写 HTML 代码 


<!=- du 8 4 1 html =-> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="best.css" type="text/css"> 
<title> 苏 州 百 特 电器 有 限 公 司 网 站 </title> 
</head> 
<body> 


oamwm 必 wh 


<div id="header" 


<div id="logo" 
<div id="search" 


class=" 











<table height="80px" align="right"> 
<tr> 
<td colspan="3"> 中 文 |ENGLISH</td> 
</tr> 
<tr> 


<td> 关 键 词 : </td> 
<td><input typ 
<td><input type: 





size="25"></td> 
src="serach.png"></td> 





</tr> 
</table> 


</div> 


<div id="nav" class=""> 






<table width="100%" height="40px" align="center"> 
<tr> 
<td id="line"><a href=""> 首 页 </a></td> 
<td id="line"><a > 关于 我 们 </a></td> 
<td i line"><a > 产品 展示 </a></td> 
<td i line"><a > 新 闻 资 讯 </a></td> 
<td id="1in href=""> 人 才 招 聘 </a></td> 
<td><a href=""> 联 系 我 们 </a></td> 
</tr> 
</table> 
</div> 
</div> 


<div id="picture" class=""><img src="big zw9021.png"></div> 


<div id="main" 





<img src="xwzx.jpg" border="0" alt=""><input type="image" 
src="more.png"> 
<ul> 


<1i><a href=""> 本 公司 正式 上 线 欢 迎 您 的 访 . .</a>&nbsp; gnbsp; 
2013-06-06</1i> 
<1i><a href=""> 本 公司 正式 上 线 欢 迎 您 的 访 . .</a>&nbsp; gnbsp; 
2013-06-06</1i> 
<1i><a href=""> 本 公司 正式 上 线 欢 迎 您 的 访 . .</a>gnbsp; gnbsp; 
2013-06-06</1i> 
<1i><a href=""> 本 公司 正式 上 线 欢 迎 您 的 访 . .</a>gnbsp; gnbsp; 
2013-06-06</1i> 
<1i><a href=""> 本 公司 正式 上 线 欢 迎 您 的 访 . .</a>&nbsp; gnbsp; 
2013-06-06</1i> 
<1i><a href=""> 本 公司 正式 上 线 欢 迎 您 的 访 . .</a>&nbsp; gnbsp; 
2013-06-06</1i> 











</ul> 


</div> 


<div id="center" class=""> 
<img src="zxcp.jpg" border="0" alt=""> 
<input type="image" src="more.png"> 
<marquee onmouseover="this.stop()" onmouseout="this. 
start () "> 


<img src="ZW0409B.jpg" border="0" alt="ZW0409B"> 
<img src="ZW9021.jpg" border a a ZW9021"> 
<img src="2ZL9012.jpg" border: ZL9012"> 
<img src="ZW9020.jpg" border="0" alt="ZW9020"> 





</marquee> 


</div> 
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60 <div id="right" class=""> 
61 <img src="lianxi.png" border="0" alt=""> 
62 <ul> 
63 <1i> 咨 询 热 线 : </1i> 
64 <1i> 固 定 电话 : 0512-65787572</1i> 
65 <li>Email:eva@better-vac.com</1i> 
66 </ul> 
67 </div> 
68 </div> 
69 <div id="footer" class=""> 
70 <p> 版 权 所 有 &copy;2013gnbsp; gnbsp; gnbsp; Suzhou Best Clean 
Electrical Co.,Ltd 苏 ICP 备 88888888 技术 支持 : 中 国 万 网 
RE </p> 
72 </div> 
73 </body> 
74 </html> 
J 
本 章 小 结 


本 章 介 绍 了 div 及 span 标记 的 基本 语法 以 及 两 个 标记 在 使 用 时 的 区 别 。 一般 而 言 ,div 
标记 是 块 级 标记 ，span 标记 是 行内 标记 ; div 标记 可 以 自动 换行 ， 而 span 标记 则 不 可 以 ; 
div 标记 可 能 包含 div 和 span 标记 ,但 span 标记 不 可 以 包含 div 标记 。 但 这 两 个 标记 的 外 
在 表现 可 以 通过 设置 display 属性 的 值 为 inline 或 block 来 实现 转换 。 

div、span 标记 必须 配合 CSS 使 用 才能 实现 精确 定位 页 面 上 每 一 个 元 素 。 通 过 id、class 
来 引用 已 经 定义 的 CSS 文件 中 类 选择 器 、ID 选择 器 及 其 他 选择 器 。 


练习 与 实验 
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1. 选择 题 
(1) 下 列 选项 中 为 行内 标记 的 是 〈 % 

(A) <p></p> (B) <div></div> (C) <span></span>  (D) <pre></pre> 
(2) 下 列 选项 中 能 够 实现 两 个 图 层 div 同时 向 右 浮动 的 是 和 


(A) div{float:night; } (B) div{float:none;} 
(C) div{float:left: } (D) div{clear:both;} 

(3) 下 列 能 够 将 div 标记 由 块 显示 方式 改 为 行内 显示 方式 的 选项 是 和 
(A) div{overflow:hidden;} (B) div{display:inline;} 
(C) div{display:block:} (D) div{display:none;} 

(4) 多 个 图 层 要 实现 层 倒 的 必要 条 件 是 position 属性 的 值 必 须 是 ( )。 
(A) static (B) relative (C) absolute (D) fixed 


(5) 下 列 选 项 中 能 够 清除 div 左右 两 边 浮动 的 属性 是 (。 )。 
(A) clear (B) display (C) overflow (D) float 


2. 填空 题 











(1) 在 HTML 文件 中 ， 定 义 图 层 的 标记 是 ” ; 定义 <span></span> 标 记 样 式 可 以 
通过 定义 三 个 属性 来 实现 ， 它 们 分 别 是 3 2 

(2) 定位 一 个 图 层 的 位 置 可 以 通过 四 个 属性 来 定位 ， 为 eR、 、width、 5 

(3) 设置 图 层 层 琶 关系 可 以 通过 设置 属性 来 实现 ， 其 属性 值 越 大 ， 图 层 越 
层 且 在 上 层 。 但 前 提 条 件 是 需要 将 属性 的 值 设置 为 absolute。 

3. 简 答题 


(1) 简 述 <div> 标 记 与 <span> 标 记 的 异同 点 。 
(2) 如 何 设置 多 个 图 层 层 肥 关系 ? 


实验 8 


1. 利用 <div> 及 <span> 标 记 设 计 如 图 8-8 所 示 的 页 面 ， 写 出 实现 的 HTML 代码 。 要 求 
使 用 链接 外 部 样式 表 。 设 计 要 求 如 下 : 

(1) 编写 外 部 样式 表 文 件 ， 名 称 为 exp_8_1.css， 采 用 链接 外 部 样式 表 的 方法 。 

(2) 加 载 图 像 文 件 名 为 exp_ 8 _1.jpg。 

(3) 定义 两 个 图 层 ， 最 外 层 图 层 包含 一 个 图 像 和 一 个 子 图 层 ， 在 子 图 层 内 采用 无 序列 
表 显示 四 行文 字 。 

(4) 对 “央视 ”“ 腾 讯 ”“ 跨 界 融 合 开放 共 赢 ”三 个 词 采用 span 标记 定义 加 粗 样式 。 

(5) 对 “ 联 建 杯 ”定义 斜体 、 加 粗 、 大 小 24px。 样 式 如 下 : 


.it{font-style:italic;font-size:24px; font-weight:bold;} 


2. 按 如 下 要 求 设计 “ 匾 牌 设计 ”页 面 ， 如 图 8-9 所 示 。 要 求 如 下 : 页 面 标 题 为 “ 匾 牌 
设计 ”; 页 面 内 容 为 一 个 图 层 中 嵌入 一 个 段落 ， 段 落 的 内 容 “ 海 纳 百川 有 容 乃 大 ” 段落 的 
样式 为 “斜体 、 特 粗 、70px 大 小 、 行 高 1.5 倍 、 隶 书 ”; 图 层 div 的 #div0 样式 :“ 宽 度 800px、 
高 度 100px、 边 框 宽度 20px、 线 型 outset、 颜 色 #ff0000、 填 充 20px、 边 距 100px”; 页 面 
所 有 内 容 居 中 显示 〈body 标记 的 样式 )。 
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本 章 学 习 目标 


CSS 最 大 的 作用 是 实现 网 页 的 内 容 与 表现 的 分 离 ， 要 让 CSS 发 挥 这 一 用 途 必须 掌握 
CSS 控制 页 面 的 文字 、 图 像 、 颜 色 、 列 表 等 样式 的 属性 是 什么 ， 然 后 再 对 这 些 元 素 的 属性 
进行 设置 ， 使 之 达到 精确 控制 页 面 每 一 元 素 的 目的 。 本 章 重 点 介绍 CSS 盒子 模型 结构 及 构 
成 盒子 模型 的 边界 (Margin)、 边 框 (Border)、 填 充 (Padding)、 内 容 (Content) 等 相关 
属性 (简称 MBPC)， 进 而 达到 灵活 运用 CSS+DIV 进行 页 面 布局 的 目标 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 熟悉 CSS 样式 设置 中 常用 的 单位 。 

。 掌握 控制 文字 、 文 本 、 背 景 、 色 彩 、 列 表 等 样式 的 属性 及 设置 方法 。 

。 理解 CSS 盒子 模型 。 

。 掌握 边框 、 边 界 、 填 充 及 内 容 等 属性 及 设置 方法 。 


9.1 CSS 属性 值 中 的 单位 


设置 CSS 属性 值 的 难点 在 于 单位 的 选用 。 它 覆盖 范围 较 广 ， 从 长 度 单位 到 颜色 单位 ， 
再 到 URL 地 址 等 。 单 位 的 取舍 在 很 大 程度 上 取决 于 用 户 的 显示 器 和 浏览 器 , 不 恰当 地 使 用 
单位 会 给 页 面 布 局 带 来 很 多 麻烦 ， 因 此 属性 值 的 单位 设置 需要 慎重 考虑 ， 合 理 使 用 。 


9.1.1 ”绝对 单位 


绝对 单位 在 网 页 中 很 少 使 用 ， 一 般 多 用 在 传统 平面 印刷 中 ， 但 在 特殊 场合 使 用 绝对 单 
位 是 很 有 必要 的 。 绝 对 单位 包括 英寸 、 厘 米 、 毫 米 、 磅 和 pica( 皮 卡 )。 

。 英寸 (in): 使 用 最 广泛 的 长 度 单位 (1in=2.54cm)。 

。 厘米 (cm): 生活 中 最 常用 的 长 度 单位 。 

。 毫米 (mm): 在 研究 领域 使 用 比较 广泛 。 

。 磅 (pt): 在 印刷 领域 使 用 较为 广泛 ， 也 称 为 点 。CSS 也 常用 pt 设置 字体 大 小 ，12 
磅 的 字体 等 于 1/6 in 大 小 (1pt=1/72in)。 

。 pica (pc): 在 印刷 领域 使 用 较 多 ，1pc=12pt， 所 以 也 称 为 12 点 活字 。 


9.1.2 ”相对 单位 
相对 单位 与 绝对 单位 相 比 显示 大 小 不 是 固定 的 ， 它 所 设置 的 对 象 受 屏幕 分 辩 率 、 视 觉 





区 域 、 浏 览 器 设置 以 及 相关 元 素 的 大 小 等 因素 影响 。CSS 属性 值 中 经 常 使 用 的 相对 单位 包 
括 em、ex、 px、9%。 
1. em 


em 表示 元 素 的 字体 高 度 , 它 能 够 根据 字体 的 font-size 属性 值 来 确定 单位 的 大 小 ,例如 : 


p{font-size:24px;line-height:2em; /* 行 高 为 48px*/} 


代码 中 设置 字体 大 小 为 24px， 行 高 为 2em， 即 是 字体 大 小 的 2 倍 ， 所 以 行 高 为 48px。 
如 果 font-size 的 单位 为 em， 则 em 的 值 将 根据 父 元 素 的 font-size 属性 值 来 确定 。 

2. ex 

ex 表示 以 所 使 用 的 字体 中 小 写字 母 x 的 高 度 作为 参考 。 在 实际 使 用 中 ,浏览 器 将 通过 
em 的 值 除 以 2 得 到 ex 的 值 。 

3. px 

px 表示 根据 屏幕 像素 点 来 确定 的 。 这 样 不 同 的 显示 分 辩 率 就 会 使 相同 取 值 的 像素 单位 
所 显示 出 来 的 效果 截然 不 同 。 在 实际 设计 过 程 中 ,建议 Web 前 端 开 发 工程 师 多 使 用 相对 单 
位 em， 且 在 某 一 类 型 的 单位 上 使 用 统一 的 单位 。 如 在 网 站 中 可 以 统一 使 用 px 或 em。 

4. 百分比 % 

百分比 也 是 一 个 相对 单位 值 。 百 分 比 的 值 总 是 通过 另 一 个 值 来 进行 计算 ， 一 般 参 考 父 
元 素 中 相同 属性 的 值 。 例 如 ， 如 果 父 元 素 宽度 为 200px， 子 元 素 的 宽度 为 50%， 则 子 元 素 
实际 宽度 为 100px。 举 例如 下 : 


p{font-size:250%;line-height:150%;} 


9.2 CSS 字体 样式 


使 用 font 标记 对 页 面 元 素 进行 字体 、 字 号 大 小 、 颜 色 的 设置 所 产生 的 样式 也 是 有 限 ， 
不 够 丰富 。 而 在 CSS 中 , 通过 font 属性 可 以 设置 丰富 多 彩 的 文字 样式 。 该 属性 是 复合 属性 ， 
所 包含 的 子 属性 如 表 9-1 所 示 。 


表 9-1 font 子 属性 表 














属 性 说 明 
font-size | 设置 字体 的 大 小 
font-style | 设置 字体 的 风格 
font-variant | 设置 小 型 的 大 写字 母 字体 
font-family 设置 字体 名 
font-weight 设置 字体 的 粗细 


9.2.1 字体 大 小 font-size 属性 


font-size 属性 用 于 设置 文本 字体 的 大 小 ， 其 值 可 以 是 绝对 或 相对 值 。 绝 对 值 将 文本 设 
置 为 指定 的 大 小 ， 不 允许 用 户 在 所 有 浏览 器 中 改变 文本 大 小 ， 这 不 利于 可 用 性 ， 但 在 确定 
输出 的 物理 尺寸 时 很 有 用 ; 相对 值 是 相对 于 周围 的 元 素来 设置 大 小 ， 允 许 用 户 在 浏览 器 中 
改变 文本 大 小 。 
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1， 基 本 语法 
font-size: 绝 对 大 小 1 相对 大 小 1 关键 字 ; 
语法 说 明 

(1) 绝对 大 小 : 可 以 使 用 in、cm、mm、Ppt、Ppc 等 单位 为 font-size 属性 赋值 。 

(2) 相对 大 小 : 可 以 使 用 em、ex、Ppx、% 等 单位 为 font-size 属性 赋值 。 

网 页 通常 是 为 了 浏览 而 不 是 印刷 ， 建 议 用 相对 单位 来 定义 字号 ， 例 如 px，W3C 推荐 
使 用 em 尺寸 单位 ， 从 而 可 以 在 所 有 浏览 器 中 调整 文本 字体 大 小 。 

font-size 属性 值 也 可 以 通过 关键 字 来 指定 大 小 ，font-size 属性 值 关 键 字 有 xx-small、 
x-small、small、medium、large、x-large、xx-large 等 。 在 不 同 的 终端 设备 上 浏览 的 效果 会 
有 些 差 异 。 
9.2.2 ”字体 样式 font-style 属性 

在 HTML 中 ， 使 用 <em></em>、<i></ 户 标记 可 将 文字 设置 成 为 斜体 。 在 CSS 中 可 以 
使 用 font-style 属性 设置 字体 的 风格 ， 例 如 显示 斜体 字样 。 

1. 基本 语法 

font-style: normal | italic | oblique 

2. 语法 说 明 

font-style 属性 取 值 及 说 明 如 表 9-2 所 示 。 

表 9-2 font-style 属性 取 值 及 说 明 表 





属 性 值 说 ” 明 
normal 表示 不 使 用 斜体 ， 是 font-style 属性 的 默认 值 
italic 表示 使 用 斜体 显示 文字 
oblique 表示 使 用 倾斜 字体 显示 


9.2.3 ”字体 系列 font-family 属性 


在 CSS 中 使 用 font 属性 可 以 设置 丰富 的 字体 , 美化 页 面 的 外 观 。 其 中 font-family 专门 
用 于 设置 字体 名 称 系列 。 

1. 基本 语法 

font-family: 字 体 1, 字体 2,.…, 字体 n 

2. 语法 说 明 

属性 值 为 多 个 字体 名 称 时 ， 可 以 使 用 逗号 (,) 分 隔 。 浏 览 器 依次 查找 字体 ， 只 要 存在 
就 使 用 该 字体 ， 不 存在 将 会 继续 找 下 去 ， 以 此 类 推 ， 直 到 最 后 一 种 字体 ， ee 
默认 字体 〈 宋 体 )。 如 果 字 体 名 称 中 出 现 空格 ， 必 须 使 用 双 引 号 将 字体 括 起 来 ， 
例如 Times New Roman 。 

【 例 9-2-1】 设 置 字体 大 小 、 样 式 及 字体 名 称 。 代 码 如 下 所 示 ， 页 面 效果 如 
图 9-1 所 示 。 视频 讲解 








履 轩 字体 大 小 、 炎 起 及 字体 名 本 








字号 大 小 20px、 字 体 正常 、 宋 体 


合 如 大 小 2004、 仓 其 好 供 、 开 方 


| 字 续 大 Jur-/arge， 实 杀生 科 体 ， 遍 





-wr 











图 9-1 设置 字体 大 小 、 样 式 及 字体 名 称 


1 <!=-edu 9 2 1.html ==> 


2 <!doctype html> 
3 <html lang="en"> 


PoDoowna ouw 心 





<head> 


<meta charset="UTF-8"> 

<title> 设置 字体 大 小 、 样 式 及 字体 名 称 </title> 

<style type="text/css"> 
h3{text-align:center;color:#3300ff;} 
hr{color:#660066;} 


#pl{font-size:20px; font-style:normal;font-family: 宋 体 ;} 
#p2{font-size:200%;font-style:italic;font-family: 楷 体 ,隶书 ;} 
#p3{font-size:x-small;font-style:oblique; font-family: 楷 体 , 打 


楷体 ;} 


#p4{font-size:xx-large; font-style:oblique; font-family: 和 黑体 ， 


隶书 ,楷体 gb23127} 
</style> 


4 

全 </head> 
6 <body> 
7 
8 


<h3> 设 置 字体 大 小 、 样 式 及 字体 名 称 </h3> 

<hr> 

<p id="p1"> 字 号 大 小 20px、 字 体 正常 、 宋 体 </p> 

<p id="p2"> 字 号 大 小 200%、 字 体 斜体 、 隶 书 </p> 

<p id="p3"> 字 号 大 小 x-small、 字 体 焉 斜体 、 宋 体 </p> 
<p id="p4"> 字 号 大 小 xx-large、 字 体 焉 斜体 、 黑 体 </p> 


3 </body> 
24 </html> 


9.2.4 ”字体 变 体 font-variant 属性 


font-variant 属性 用 于 设置 字体 变 体 ， 主 要 用 于 设置 英文 字体 ， 实 际 上 是 设置 文本 字体 
是 否 为 小 型 的 大 写字 母 。 
1. 基本 语法 


font-variant: normal | small-caps 


2. 语法 说 明 
font-variant 属性 的 参考 值 如 表 9-3 所 示 。 


表 9-3 font-variant 属性 取 值 表 








属 性 值 说 有明 
normal | 表示 正常 的 字体 ， 是 font-variant 属性 的 默认 值 
small-caps, 表示 使 用 小 型 的 大 写字 母 字体 
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9.2.5 ”字体 粗细 font-weight 属性 


在 HTML 中 使 用 <strong></strong> 或 <b></b> 标 记 来 设置 字体 加 粗 。 在 CSS 中 可 以 使 
用 font-weight 属性 用 于 设置 文本 字体 的 粗细 。 
1. 基本 语法 


font-weight: normal | bold | bolder | lighter 110012001.…1900 


2. 语法 说 明 
font-weight 属性 的 参考 值 如 表 9-4 所 示 。 
表 9-4 font-weight 属性 取 值 表 








属 性 值 说 明 
normal 表示 正常 的 字体 ， 是 font-weight 属性 的 默认 值 
bold 表示 标准 的 粗 体 
bolder 表示 特 粗 体 〈 为 相对 参数 ) 
lighter 表示 细 体 (为 相对 参数 ) 
整数 取 值 为 100、200、……….、900 来 表示 粗细 程度 , 100 表示 最 细 、400 等 价 于 normal、 





700 等 价 于 bold 
9.2.6 ”字体 font 属性 


font 属性 是 复合 属性 ， 一 次 完成 多 个 字体 属性 的 设置 ， 包 括 字 体 粗 细 、 风 格 、 字 体 变 
体 、 大 小 / 行 高 及 字体 名 称 。 
1. 基本 语法 


font:font-style font-weight font-variant font-size/line-height font-family 


2. 语法 说 明 

利用 font 属性 一 次 完成 多 个 字体 属性 的 设置 时 ,属性 值 与 属性 值 之 间 必须 使 用 空格 隔 
开 。 前 三 个 属性 值 可 以 不 分 先后 顺序 , 默认 为 normal。 大 小 和 字体 名 称 系列 必须 显 式 指定 ， 
先 设置 大 小 ， 再 设置 字体 系列 。 需 要 设置 行 高 时 ， 可 以 写 在 字体 大 小 的 后 面 ， 中 间 用 “/” 
分 隔 ， 行 高 为 可 选 的 属性 。font 属性 可 以 继承 。 

【 例 9-2-2】 设 置 字体 变 体 、 粗 细 、 复 合 属性 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-2 所 示 。 


1 <-eda 9 2 2.html 一 -六 | 


2 <!doctype html> 
3 <html lang="en"> 





全 


4 <head> 
5 <meta charset="UTF-8"> 视频 讲 
6 <title> 设置 字体 变 体 、 粗 细 、 复 合 属性 </title> 
7 <style type="text/css"> 
8 h3{text-align:center;color:#3300ff;} 
9 hr{color:#660066;} 
10 #pl{font-variant:normal;font-weight:lighter;} 
11 #p2{font-variant:small-caps;font-weight:bold;} 
起 #p3{font-weight:600;font:italic 28px/40px 幼 圆 ;} 
13 #p4{font:italic bolder small-caps 24px/1.5em 黑体 ;} 


14 </style> 


15 </head> 


16 <body> 

TT <h3> 设 置 字体 变 体 、 粗 细 、 复 合 属性 </h3> 

18 <hr> 

19 <p> 此 段 文字 正常 显示 Welcome to you!</p> 

20 <p id="p1"> 此 段 文字 Welcome to you! 正 常 、 较 细 字 体 。 </p> 

21 <p id="p2"> 设 置 小 型 大 写字 母 、 字 体 标准 粗 体 。</p> 

22 <p ”id="p3"> 设 置 字体 粗细 度 为 600、 斜 体 、 大 小 28px、 行 高 50px、 字 体 幼 圆 </p> 

23 <p ”id="p4"> 设 置 字体 风格 斜体 、 特 粗 \ 小 型 大 写字 母 HTML、 字 号 24px/ 行 高 1 . 5em、 
字体 黑体 </p> 

24 </body> 

25 </html> 








设置 字体 变 体 、 粗 细 、 人 复合 局 性 





此 服 文 宁 正 这 显示 Wdeaac to yout 
此 股 六 宁 Wukome to youl 正 常 、 园 细 宁 体 。 
设置 小 型 大 写字 母 、 宁 体 标准 粗 休 


识 圳 字 休 好 纲 碟 为 600， 得 伯 ， 不 28px， 疗 痊 50px。 字 {4 辐 
座 名 守 众 风 胡 各 体 ， 和 将 稻 ， 小 剖 太 写 宇 8HTWML， 字 号 24rx/ 打 商 1, 5ew， 守 纵 霹 从 | 








图 9-2 设置 字体 变 体 、 粗 细 、 复 合 属性 


上 述 代 码 中 第 7 一 14 行 在 head 标记 中 插入 内 部 样式 表 ， 并 定义 标题 字 h3、 水 平分 隔 
线 hr 标记 样式 和 4 个 段落 id 样式 。 第 10 行 定义 字体 正常 、 较 细 样 式 ; 第 11 行 定义 字体 
小 型 大 写字 母 、 标 准 粗 体 ; 第 12 行 、 第 13 行 分 别 采用 font 复合 属性 定义 了 段落 的 样式 。 
程序 运行 后 ， 第 20 一 23 行 分 别 应 用 样式 pl、p2、p3、p4， 效 果 如 页 面 中 文字 所 示 。 


9.3 ”CSS 文本 样式 
在 CSS 中 ， 不 仅 可 以 设置 文字 字体 、 大 小 、 粗 细 、 风 格 等 ， 还 可 以 对 文本 显示 进行 更 
精细 排版 设置 。 
9.3.1 字符 间距 letter-spacing 属性 


letter-spacing 间距 属性 可 以 设置 字符 与 字符 之 间 的 距离 。 

1. 基本 语法 

letter-spacing:normal | 长 度 单位 

2. 语法 说 明 

normal 表示 默认 间距 ， 长 度 一 般 为 正 数 ， 也 可 以 使 用 负数 ， 取 决 于 浏览 器 是 否 支 持 。 
word-spacing 属性 主要 针对 英文 单词 , letter-spacing 属性 对 中 文 、 英 文字 符 串 均 起 作用 。 


9.3.2 ”行距 line-height 属性 
line-height 用 于 设置 行 与 行 之 间 的 距离 。 
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1. 基本 语法 

line-height : normal | length 

2， 语法 说 明 

normal: 默认 行 高 。 

length: 百分比 、 数 字 。 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百 
分 比 取 值 是 基于 字体 的 高 度 尺寸 。 


9.3.3 ” 首 行 缩 进 text-indent 属性 

在 HIML 中 段落 的 首 行 往往 需要 通过 插入 四 个 “&nbsp; ”才能 实现 首 行 空 两 个 字符 
的 排版 格式 ， 而 在 CSS 中 可 以 使 用 text-indent 属性 来 设置 首 行 缩 进 量 。 

1. 基本 语法 

text-indent: 长 度 单位 | 百分比 单位 

2. 语法 说 明 

长 度 单 位 可 以 使 用 绝对 单位 和 相对 单位 ， 也 可 以 使 用 百分比 单位 。 

【 例 9-3-1】 设 置 字符 间距 、 行 距 及 首 行 缩 进 。 代 码 如 下 所 示 ， 页 面 效果 如 图 9-3 所 示 。 


1 <!--edu 9 3 1.html --> 国史 3 加 
2 <!doctype html> 加 

3 <html lang="en"> 

4 <head> 回 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 设置 字符 间距 、 行 高 及 首 行 缩 进 </title> 

7 <style type="text/css"> 

8 h3{text-align:center;color:#3300ff;} 

9 hr{color:#660066;} 

10 #pl{letter-spacing:2px;line-height:1lem;text-indent:2em;} 
1 #p2{letter-spacing:4px;line-height:1.5em;text-indent:3em;} 
12 #p3{letter-spacing: 6px;line-height:2em;text-indent:4em; 


word-spacing:10px;} 
33 </style> 
14 </head> 
15 <body> 


16 <h3> 设 置 字符 间距 、 行 高 及 首 行 缩 进 </h3> 
a <hr> 
18 <p id="pl"> [字符 间距 2px、 行 高 lem、 首 行 缩 进 2em] 昨天 上 午 ， 南 京 国际 博览 中 


心 金陵 会 议 中 心 内 欢声 笑语 ， 春 意 青 然 ， 省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 领 
导 罗 志 军 、 李 学 勇 、 张 连 珍 等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 向 
全 省 人 民 致 以 节日 问候 和 美好 祝福 。</p> 

19 <p id="p2">[ 字 符 间 距 4px、 行 高 1.5em、 首 行 缩 进 3em] 昨天 上 午 ， 南 京 国际 博览 
中 心 金陵 会 议 中 心 内 欢声 笑语 ， 春 意 益 然 ， 省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 
领导 罗志军 、 李 学 勇 、 张 连 珍 等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 
向 全 省 人 民 致 以 节日 问候 和 美好 祝福 。</p> 

20 <p id="p3">[ 字 符 间 距 6px、 行 高 2em、 首 行 缩 进 4em、 单 词 间距 10px] 昨 天 上 午 ， 
南京 国际 博览 中 心 金陵 会 议 中心 内 欢声 笑语 ， 春 意 益 然 ， 省 委 、 省 政府 在 这 里 举行 春 
节 团拜 会 。Chinese leader Xi Jinping has urged the Communist Party 
of China (CPC) to be more tolerant of criticism and receptive to 
the views of non-communists.</p> 

21 </body> 

22 </html> 














设置 字符 间 路 、 行 高 及 青 行 缠 进 





gl i 





【于 符 交 路 4ps、 行 高 1 gem、 昔 行 随 坦 sm] 昨天 上 午 ， 南 京 国际 靖 竟 中 心 全 陵 会 议 中 心 内 欢声 
疾 博 ， 考 音 在 关 。 省 役 、 才 政府 在 这 里 举行 奉节 团 关 会。 省 入 导 罗 志 至 、 地 和 勇 、 张 杷 等 每 吉 办 人 
士 19098 训 人 专权 一 主 ， 共 理 传 丘 新 春 住 节 。 癌 全 省 人 民政 以 节日 间 从 和 美好 祝福 





【 手 荐 同 画 6pz、 行 高 3cm、 面 条 壤 过 4cm- 单词 同 天 10px1 夺 天 上 午 ， 南京 国际 短 
蓝 申 心 全 玻 去 私 中 心 内 区 声 条 赤 ， 春 重大 此 。 震 委 、 画 政府 在 立 里 竺 行 民主 。 
Chinese leader 














图 9-3 设置 字符 间距 、 行 距 及 首 行 缩 进 


上 述 代码 中 第 18 行 设置 字符 间距 2px、 行 高 lem、 首 行 缩 进 2em; 第 19 行 设置 字符 
间距 4px、 行 高 1.5em、 首 行 缩 进 3em; 第 20 行 设置 字符 间距 6px、 行 高 2em、 首 行 缩 进 
4em、 单 词 间距 10px。 页 面 效 果 截 然 不 同 。 


9.3.4 字符 装饰 text-decoration 属性 


字符 装饰 text-decoration 属性 主要 用 来 完成 文字 加 上 画 线 、 下 画 线 、 删 除 线 等 效果 。 
1. 基本 语法 


text-decoration : none| underline | overline | line-through 


2. 语法 说 明 
none: 表示 文字 无 装饰 。underline: 表示 文字 加 下 夯 线 。line-through: 表示 文字 加 删 
除 线 。overline: 表示 文字 加 上 画 线 。 


9.3.$ ”英文 大 小 写 转换 text-transform 属性 


利用 text-transform 属性 以 转换 英文 大 小 写 。 
1. 基本 语法 


text-transform: capitalize| uppercase | lowercase|l none 


2. 语法 说 明 

capitalize: 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 不 转换 。 

uppercase: 转换 成 大 写 ; lowercase: 转换 成 小 写 。 

none: 不 转换 。 

【 例 9-3-2】 设 置 文字 装饰 及 大 小 写 转换 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-4 所 示 。 


1 <1-= edu 9 3 2.hitml = 一 > 
2 <!doctype html> 
3 <html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 设置 文字 装饰 及 大 小 写 转 换 </title> 
<style type="text/css"> 
h3{text-align:center;color:#3300ff; 
hr{color:#660066;} 





omar 
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10 #pl {text-decoration:underline;text-transform:capitalize;} 

让 于 #p2{text-decoration:line-through; text-transform: lowercase;} 
12 #p3{text-decoration:overline;text-transform:uppercase;} 

13 </style> 

14 </head> 

15 <body> 

16 <h3> 设 置 文 字 装 饰 及 大 小 写 转换 </h3> 

17 <hr> 

18 <p id="pl"> [文字 下 夯 线 、 首 字母 大 写 capitalize]Chinese leader Xi 


Jinping has urged the Communist Party of China (CPC) to be more 
tolerant of criticism and receptive to the views of non- 
communists.</p> 

19 <p id="p2"> [文字 删除 线 、 字 母 小 写 lowercase]Chinese leader Xi Jinping 
has urged the Communist Party of China (CPC) to be more 
tolerant of criticism and receptive to the views of non- 
communists.</p> 

20 <p id="p3"> [文字 上 画 线 、 字 母 大 写 uppercase]Chinese leader Xi Jinping 
has urged the Communist Party of China (CPC) to be more 
tolerant of criticism and receptive to the views of non- 
communists.</p> 

全 和 </body> 

22 </html> 





可 TPPERCASEJCHINESE LEADER XI INPING HAS URGED THE COMMUNIST PARTY 
OF CHINA (CPC) TO BE MORE TOLERANT OF CRITICISM AND RECEPTIVE TO THE VIEWS OF NON- 
COMMUNISTS. 

















—— 





图 9-4 设置 文字 装饰 及 大 小 写 转换 
上 述 代 码 中 第 18 行 设置 文字 下 夯 线 、 首 字母 大 写 capitalize; 第 19 行 设置 文字 删除 线 、 
字母 小 写 lowercase; 第 20 行 设置 了 文字 上 画 线 、 字 母 大 写 uppercase。 页 面 效果 截然 不 同 。 
9.3.6 ”水 平 对 齐 text-align 属性 


text-align 属性 规定 元 素 的 水 平 对 齐 方式 。 

1. 基本 语法 

text-align: left | right | center | justify 

2. 语法 说 明 

left: 表示 左 对 齐 ， 默 认 值 ，right: 表示 右 对 齐 ; center: 表示 居中 ; justify: 表示 两 端 
对 齐 。 
9.3.7 ”垂直 对 齐 vertical-align 属性 


vertical-align 属性 以 设置 元 素 的 垂直 对 齐 方式 。 


1. 基本 语法 

vertical-align: top Imiddle |bottom|ltext-topltext-bottom 

2. 语法 说 明 

语法 中 常用 属性 值 及 说 明 如 表 9-5 所 示 ， 还 有 一 些 不 常用 的 属性 值 未 列 入 其 中 。 


表 9-5 vertical-align 常用 属性 值 表 
属 性 值 说 明 










把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
把 此 元 素 放置 在 父 元 素 的 中 部 

bottom 把 元 素 的 顶端 与 行 中 最 低 元 素 的 顶端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 






top 
middle 








text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
【 例 9-3-3】 设 置 内 容 对 齐 方式 。 代 码 如 下 所 示 ， 页 面 效果 如 图 9-5 所 示 。 


设置 水 平 与 重 直 对 者 方 式 




















文 闻 水平 居 左 ， 丁 全 因 顶 解 | 这 是 - 了 
广 于 术 平 居 中 ， mauve—t Fp. 


[文王 水 二 民有 ， ee 





| > 
9-5 设置 水 平 与 垂直 对 齐 方式 


区 da 9 3 3. 和 bal ==> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 设置 水 平 与 垂直 对 齐 方式 </title> 

7 <style type="text/css"> 

8 h3{text-align:center;color:#3300ff;} 
9 hr{color:#660066;} 

0 


EA #divl {margin:10px;width:700px;height:60px;background:#ccffcc; 
text-indent:2em;text-align:left;} 
11 #div2 {margin:10px;width:700px;height:60px;background:#ffffcc; 
text-indent:2em;text-align:center;} 
和 #div3{margin:10px;width:700px;height:60px;background:#99ff£f99; 
text-indent:2em;text-align:right;} 
13 img{width:50px;height:50px;} 
14 #imgl {vertical-align:text-top;} 
15 #img2{vertical-align:middle;} 
16 #img3{vertical-align:text-bottom;} 
17 </style> 
18 </head> 
19 <body> 
20 <h3> 设 置 水 平 与 垂直 对 齐 方式 </h3> 第 
21 <hr> 
22 <div id="divl" class=""> 9 
在 
时 
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23 <p> [文字 水 平 居 左 ， 图 像 居 顶部 ] 这 是 一 幅 <img id="img1l" src="eg_cute. 
gif"> 位 于 段落 中 的 图 像 。</p> 

24 </div> 

5 <div id="div2" class=""> 

26 <p> [文字 水 平 居 中 ， 图 像 居 中 部 ] 这 是 一 幅 <img id="img2" src="eg_cute. 
gif"> 位 于 段落 中 的 图 像 。</p> 

27 </div> 

28 <div id="div3" class=""> 

29 <p> [文字 水 平 居 右 ， 图 像 居 底部 ] 这 是 一 幅 <img id="img3" src="eg_cute. 
gif"> 位 于 段落 中 的 图 像 。</p> 

30 </div> 

31 </body> 

32 </html> 


上 述 代码 中 第 22 一 24 行 divl 内 设置 文字 水 平 居 左 ， 图 像 居 顶部 ; 第 25 一 27 行 div2 
内 设置 文字 水 平 居 中 ， 图 像 居中 部 ; 第 28~30 行 div3 内 设置 文字 水 平 居 右 ， 图 像 居 底部 


9.4 CSS 颜色 与 背景 


网 页 设计 中 结构 和 内 容 仅 是 一 方面 ， 没 有 色彩 的 页 面 再 精致 也 很 难 吸引 人 。CSS 中 对 
于 色彩 、 图 像 的 设置 也 比较 丰富 ， 功 能 也 很 强大 。 


9.4.1 颜色 color 属性 


color 属性 用 于 设置 元 素 字体 的 色彩 ， 该 属性 的 语法 比较 简单 ， 但 有 多 种 取 值 ， 分 别 是 
颜色 英文 名 称 、rgb0 函 数 、 十 六 进 制 数 等 形式 。 
1. 基本 语法 


color : rgb (r%, g%, b%) |rgb (r, g, b) |#FFFFFF | #3FE |colorname 


2. 语法 说 明 

(1) 颜色 名 称 。 使 用 red、blue、yellow 等 CSS 预定 义 的 表示 颜色 的 参数 。CSS 预定 
义 17 种 颜色 ， 常 用 的 预定 义 颜色 如 表 9-6 所 示 。 

(2) rgb0 函 数 。 使 用 rgb (r, g,b) 或 rgb (1%, g%,b%)， 字母 RR 或 r、G 或 g、B 或 b 
分 别 表示 颜色 分 量 红色 、 绿 色 、 蓝 色 ， 前 者 参数 的 取 值 为 0 一 255， 后 者 参数 的 取 值 为 0 一 100。 

(3) 十 六 进 制 数 。 使 用 “#rggbb” 或 “ 雪 gb” 的 形式 ， 每 位 十 六 进 制 数 的 取 值 范 围 为 
0~F， 如 几 FCOCB 表示 pink，#3DF 效果 与 #33DDFF 相同 。 


表 9-6 颜色 名 称 、 函 数 及 数值 
00 
rgb (100%- 10006- 100%) rgb (255,255,255) 
Red rgb (100%,0%.0%) rgb (255,0,0) 
Yellow rgb (100%,100%,0%) rgb (255.255.0) 
i rgb (0%,100%,0%) rgb (0.255.0) 


rgb (096.10096.1009g) rgb (0.255,255) 
rgb (0%.0%,100%) 


rgb (0.0.255) 







































续 表 













十 六 进 制 数 rgb 百分数 


Fuchsia #FOOEFF rgb (10096.096.1009g) rgb (255,0,255) 
Gray | #808080 rgb (50%,50%.50%) rgb (128,128,128) 
Silver | #c0c0c0 Tgb (75%,75%,75%) rgb (192,192,192) 
#800000 rgb (50%,0%.0%) rgb (128.0.0) 
rgb (50%,50%.0%) rgb (128.128.0) 
rgb (0%.,50%.0%) rgb (0.128.0) 

rgb (0%,50%.50%) rgb (0.128.128) 

















Maroon 
Olive 
















9.4.2 ”背景 background 属性 


background 属性 用 于 设置 指定 元 素 (标记 ) 的 背景 色彩 、 背 景 图 案 等 ， 其 子 属性 如 表 
9-7 所 示 。 


表 9-7 ” background 子 属性 表 


属 性 说 明 
background-color 用 于 对 指定 元 素 设置 背景 颜色 
background-image 用 于 对 指定 元 素 设置 背景 图 案 
background-repeat 在 背景 图 案 小 于 指定 元 素 的 情况 下 ， 是 否 重复 填充 图 案 
background-attachment 用 于 指定 设置 的 背景 图 案 在 元 素 滚 动 时 是 否 一 起 滚动 
background-position 用 于 指定 背景 图 案 的 起 始 位 置 


1. 背景 颜色 background-color 属性 
在 HIML 中 ， 可 以 使 用 标记 的 bgcolor 属性 来 设置 背景 色 。 在 CSS 中 则 使 用 background- 
color 来 设置 网 页 的 背景 颜色 。 语 法 同 color 类 似 。 
背景 图 像 background-image 属性 
background-image 属性 用 于 设置 指定 元 素 的 背景 图 案 。 


1) 基本 语法 
background-image : url(" 图 像 文件 名 称 ") |none 
2) 语法 说 明 


none: 表示 不 用 图 像 作为 背景 。url (" 图 像 文 件 名 称 "): 表示 图 像 的 相对 或 绝对 路 径 ， 
如 果 图 像 文 件 和 CSS 文件 在 同一 目录 下 ， 则 可 以 直接 使 用 图 像 文 件 名 称 。 
【 例 9-4-1】 设 置 页 面 文字 颜色 及 背景 图 像 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-6 所 示 。 





| 天 上 午 ， 有 音 杰 去 然 ， 省 委 、 省 坷 
府 在 1000 多 人 欢聚 一 合 ， | 
be 











图 9-6 设置 背景 图 像 及 颜色 


CSS 棒 元 属 任 


册 @ 让 


Web 所 详 开 和 八 太 天 一 一 HTML5、CSS3、JavaScript ( 菇 3 版 ) 





1 <!-- edu 9 4 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 设 置 页 面 文字 颜色 及 背景 图 像 </title> 

于 <style type="text/css"> 

8 h3{color:#0000ff;background-color:#9999ff; 

text-align:center;padding:10px;} 

9 #pl{text-indent:2em;background-image:url ("Header.jpg");} 
10 #p2{text-indent:2em;background-image:url ("cup.jpg");} 
1 </style> 
12 </head> 
13 <body> 

4 <h3> 设 置 页 面 文字 颜色 及 背景 图 像 </h3> 

5 <p id="p1">[ 大 图 Header .jpg] 昨 天 上 午 ， 南 京 国际 博览 中 心 金陵 会 议 中 心 内 欢声 


笑语 ， 春 意 盘 然 ， 省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 领导 罗志军 、 李 学 勇 、 张 连 
珍 等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 向 全 省 人 民 致 以 节日 问候 和 


美好 祝福 。 
6 </p> 
7 <p id="p2">[ 小 图 cup.jpg] 昨 天 上 午 ， 南 京 国际 博览 中 心 金陵 会 议 中 心 内 欢声 笑 


语 ， 春 意 表 然 ， 省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 领导 罗志军 、 李 学 勇 、 张 连 珍 
等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 向 全 省 人 民 致 以 节日 问候 和 美 





好 祝福 。 
8 </p> 
9 </body> 
20 </html> 


上 述 代 码 中 第 15 行 应 用 id 样式 pl, 设置 背景 图 像 为 Header.jpg; 第 17 行 应 用 id 样式 
p2, 设置 背景 图 像 为 cup.jpg, 由 于 图 像 本 身 比较 小 , 所 以 背景 图 像 在 水 平方 向 重复 填充 了 。 

3， 背景 图 像 重 复 background-repeat 属性 

background-repeat 属性 用 于 设置 背景 图 案 的 重合 覆盖 方式 。 

1) 基本 语法 


background-repeat: repeat | no-repeat | repeat-x | repeat-y 


2) 语法 说 明 

。 repeat: 使 用 背景 图 像 完全 填充 元 素 大 小 的 空间 。 

。 repeat-x: 使 用 背景 图 像 在 水 平方 向 从 左 到 右 填充 元 素 大 小 的 空间 。 

。 repeat-y: 使 用 背景 图 像 在 垂直 方向 从 上 到 下 填充 元 素 大 小 的 空间 。 

。 no-repeat: 不 使 用 背景 图 像 重 复 填 充 元 素 。 

4. 背景 附件 background-attachment 属性 

background-attachment 背景 附件 属性 设置 背景 图 像 是 否 随 着 滚动 条 一 起 滚动 。 
1) 基本 语法 


background-attachment : scroll | fixed 
2) 语法 说 明 
。 scroll: 表示 在 文字 页 面 滚动 时 ， 背 景 附件 一 起 滚动 。 


。 fixed: 表示 在 文字 页 面 滚动 时 ， 背 景 附件 固定 不 滚动 。 

S. 背景 图 像 位 置 background-position 属性 
background-position 属性 用 于 设置 背景 图 像 的 具体 的 起 始 位 置 。 
1) 基本 语法 


background-position: 参数 1 参数 2 
2) 语法 说 明 
图 像 的 位 置 一 般 需 要 设置 两 个 参数 ， 且 用 空格 分 隔 。 两 个 参数 的 单位 可 以 是 百分比 、 


长 度 单位 或 关键 字 。 第 一 个 参数 表示 水 平 位 置 ， 第 二 个 参数 表示 垂直 位 置 。 也 可 以 只 设置 
一 个 参数 ， 另 一 个 参数 自动 为 50% 或 居中 位 置 。 参 数 取 值 如 表 9-8 所 示 。 


表 9-8 ” background-position 属性 值 及 说 明 


属 性 值 说 明 
leftlcenterlright 表示 水 平方 向 居 左 、 居 中 、 居 右 三 个 不 同 的 位 置 
表示 垂直 方向 顶部 、 中 部 、 底 部 三 个 不 同 的 位 置 。 如 果 仅 规定 了 一 个 值 ， 另 一 个 
toplcenterlbottom 值 将 是 center 
i x% 表 示 水 平 位 置 ，y% 表 示 垂 直 位 置 。 左 上 角 是 0% 0%， 如 果 仅 规定 了 一 个 值 ， 
2 另 一 个 值 将 是 50% 
ee xpos 表示 水 平 位 置 ，ypos 表示 垂直 位 置 。 左 上 角 是 0 0， 如 果 仅 规定 了 一 个 值 ， 





另 一 个 值 将 是 50% 


6，background 复合 属性 

背景 background 是 复合 属性 ， 可 以 使 用 它 一 次 性 完成 背景 颜色 、 图 像 、 重 复 、 位 置 和 
附件 的 设置 。 

1) 基本 语法 


background:background-color background-image background-repeat 
background-position background-attachment 


2) 语法 说 明 
语法 中 属性 值 的 设置 参考 各 属性 进行 设置 。 


【 例 9-4-2】 设置 背景 图 像 重复 、 位 置 与 附件 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-7 
所 示 。 





和 汉中 心 内 欢声 笑语 ， 奉 合 盆 然 ， 省 委 、 省 政 
会、 > 张 这 于 等 与 各 看 人 士 1000 条 人 欢 惨 一 全 ， 闪 迎 伟 
间 全 前 2 
BN NN 

















图 9-7 设置 背景 图 像 重 复 、 位 置 与 附件 
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1 <!-- edu 9 4 2.html =-> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 设 置 背 景 图 像 、 位 置 与 附件 </title> 

光 <style type="text/css"> 

8 h3{color:#ffffff;background-color:#6600ff; 

text-align:center;padding:10px;} 

9 #p1{ 

10 background-image:url ("Header .jpg"); 

3 background-repeat: no-repeat; 

12 background-position:center center;} 

3 #p2{ 

14 background-image:url ("cup.jpg"); 

15 background-attachment :fixed;} 

16 #p3{width:100%;height:150px; 

17 background:#99ccff url ("cup.jpg") no-repeat center center; } 

18 </style> 

19 </head> 

20 <body> 

21 <h3> 设 置 背 景 图 像 、 位 置 与 附件 </h3> 

22 <p id="p1"> [图像 水 平 垂直 居中 ] 昨 天 上 午 ， 南 京 国际 博览 中 心 金陵 会 议 中 心 内 欢声 
笑语 ， 春 意 嚼 然 ， 省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 领导 罗志军 、 李 学 勇 、 张 连 
珍 等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 向 全 省 人 民 致 以 节日 问候 和 
美好 祝福 。</p> 

23 <p id="p2"> [图像 水 平 居 左 到 项 、 固 定 ] 昨天 上 午 ， 南 京 国际 博览 中 心 金陵 会 议 中 心 
内 欢声 笑语 ,春意 丛 然 ,省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 领导 罗志军 、 李 学 勇 、 
张 连 珍 等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 向 全 省 人 民 致 以 节日 问 
候 和 美好 祝福 。</p> 

24 <p id="p3"> [背景 复合 属性 应 用 ] 昨 天 上 午 ， 南 京 国际 博览 中 心 金陵 会 议 中 心 内 欢声 
笑语 ， 春 意 嚼 然 ， 省 委 、 省 政府 在 这 里 举行 春节 团拜 会 。 省 领导 罗志军 、 李 学 勇 、 张 连 
珍 等 与 各 界 人 士 1000 多 人 欢聚 一 堂 ， 共 迎 传统 新 春 佳节 ， 向 全 省 人 民 致 以 节日 问候 和 
美好 祝福 。</p> 

25 </body> 

26 </html> 


上 述 代码 中 定义 了 三 个 id 样式 ，p1 定义 背景 图 像 不 重复 且 水 平和 垂直 均 居 中 ，p2 定 
义 背 景 图 像 附 件 不 随 滚动 条 移动 , p3 定义 宽度 和 高 度 , 并 采用 复合 属性 background 设置 背 
景 颜色 、 图 像 、 重 复 、 位 置 等。 第 22 行 应 用 id 样式 p1， 网 页 中 图 像 不 重复 且 水 平 、 垂 直 
均 居中 显示 ; 第 23 行 应 用 这样 式 p2， 网 页 中 第 2 个 段落 背景 图 像 重复 填充 整个 区 域 ， 且 
在 浏览 器 窗口 缩小 的 情况 下 背景 图 像 不 随 滚动 条 移动 ; 第 24 行 应 用 id 样式 p3， 网 页 中 第 
3 个 段落 设置 宽度 为 100%、 高 度 为 1530px、 背 景 颜色 、 图 像 、 不 重复 、 位 置 居中 等 。 


9.5 CSS 列表 样式 


HTML 中 常用 列表 有 三 种 类 型 ， 分 别 是 无 序列 表 、 有 序列 表 和 定义 列表 。 在 实际 应 用 
中 ， 常 使 用 无 序列 表 来 实现 导航 和 新 闻 列表 的 设计 ; 使 用 有 序列 表 实 现 条 文 款项 的 表示 ; 
使 用 定义 列表 来 制作 图 文 混 排 的 排版 模式 。 列 表 对 于 设计 有 语义 的 XHTML 文档 非常 重要 。 
CSS 中 提供 了 list-style-type、list-style-image、list-style-position、list-style 属性 来 改变 列表 
符号 的 样式 。 


1. 基本 语法 


list-style-type: 属性 值 ; /* 设置 列表 类 型 ， 共 9 种 */ 

list-style-image: url(" 图 像 文件 名 称 ") |none; /* 设置 列表 替代 图 像 */ 
list-style-position:outside|inside; /* 设置 图 像 位 置 */ 

list-style: list-style-type list-style-image 1ist-style-position; /* 复合 属性 */ 
list-style:none url("smallicol.bmp") outside ;/* 复合 属性 的 一 个 应 用 */ 


2. 语法 说 明 
list-style-type 属性 取 值 如 表 9-9 所 示 。 
表 9-9 list-style-type 属性 说 明 表 











属 性 值 说 明 

disc 实心 贺 @ 

circle 空心 圆 O 

square 实心 方块 国 

decimal 阿拉 伯 数 字 123.… 
lower-roman 小 写 罗马 数字 Tiiii.…. 
upper-roman 大 写 罗 马 数 字 IIIIIV … 
lower-alpha 小 写 英文 字母 abc… 
upper-alpha 大 写 英文 字母 ABC.… 
none 不 使 用 项 目 符号 


list-style-image 属性 通过 url ("图 像 文件 名 称 "〉 来 加 载 图 像 ， 如 果 图 像 与 CSS 文件 在 
同一 目录 ， 则 直接 使 用 图 像 文 件 名 。 属 性 值 为 none 表示 不 使 用 图 像样 式 的 列表 符号 。 
list-style-position 属性 取 值 如 表 9-10 所 示 。 


表 9-10 ”list-style-position 属性 说 明 表 


属 性 值 说 明 
outside 默认 值 ， 将 标志 放 在 文本 之 外 ， 而 且 任 何 换行 文本 在 标志 下 均 不 对 齐 
inside 将 标志 放 在 文本 之 内 ， 而 且 任 何 换行 文本 在 标志 下 均 对 齐 





【 例 9-S-1】CSS 列表 属性 综合 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-8 所 示 。 
加 


1 <!-- edu 9 5 1.html 一 -> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> x 

. <meta charset="UTF-8"> 视频 讲解 

6 <title>CSS 列 表 属性 综合 应 用 </title> 

量 <style type="text/css"> 

8 h3{color:"#ffffff";background-color:#9999ff;text-align:center;} 

中 #1il{list-style-type:square;} 

10 #1i2{1list-style-type:upper-roman;} 

11 #1i3{1list-style-image:url("smallicol.bmp") ;list-style-— 
position:inside;} 

12 #1i4{1list-style-image:url("smallicol.bmp") ;list-style-— 
position:outside;} 

看 分 .spl{font-weight:bolder;color:blue;} 

14 </style> 

35 </head> 

16 <body> 
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17 <h3>CSS 列 表 属 性 综合 应 用 </h3> 

18 <ul id="1il"> 

19 <1i> 专 业 目 录 

20 <ol id="1i2"> 

21 <1i> 计 算 机 科学 与 技术 专业 </1i> 
22 <1i> 软 件 工 程 </1i> 

23 <1i> 信 息 管理 与 信息 系统 </1i> 
24 </ol1> 

25 </1i> 

26 <1i> 图 书 

27 <ul id="1i3" > 

28 <1i><span class="spl">[inside]</span> 计 算 机 网 络 : 计算 机 


网 络 所 属 现代 词 ， 指 的 是 将 地 理 位 置 不 同 的 具有 独立 功能 的 多 台 计 算 机 
及 其 外 部 设备 ， 通 过 通信 线路 连接 起 来 ， 在 网 络 操作 系统 ， 网 络 管理 软 
件 及 网 络 通信 协议 的 管理 和 协调 下 ， 实 现 资源 共享 和 信息 传递 的 计算 机 
系统 。</1i> 

29 <1i id="]li4"><span class="spl">[outside]</span> 数 据 库 
原理 : 是 数据 库 初 学 者 和 初级 开发 人 员 不 可 多 得 的 数据 库 宝 典 ， 其 中 融 
入 了 作者 对 数据 库 深 入 透彻 的 理解 和 丰富 的 实际 操作 经 验 。 与 第 2 版 一 
样 ， 本 版 也 深入 浅 出 地 描绘 了 数据 库 原理 及 其 应 用 。</1i> 


30 </ul> 

31 </1i> 

32 <1i> 期 刊 目录 </1i> 
33 </ul> 

34 </body> 

35 </html> 


上 述 代 码 中 定义 了 四 个 id 样式 ， 第 9 行 定义 列表 样式 类 型 为 图 ; 第 10 行 定义 列表 样 
式 类 型 为 大 写 罗马 字母 ; 第 11 行 定义 用 图 像 代 蔡 列表 项 符号 并 使 用 inside 格式 ,文本 环绕 
图 像 ， 第 12 行 定义 用 图 像 代 蔡 列 表 项 符号 并 使 用 outside 格式 ， 图 像 悬 挂 在 文本 的 左边 ， 
并 不 环绕 。 





且 信息 管理 与 信息 系 挤 
。 胃 书 


Ly tn ter a er et 
Et 人。 网 和 和 理 罗 件 及 风 拘 呈 人 
es 


eenido| 半 者 库 且 理 ， 晤 各 失 库 办 兴 省 和 7 雪 开 丰 人 全 不 可 多 位 的 各 从 和 二 灿 ， 天 中 胜 和 了 作 衣 攻 
和 于 的 守 扩 作 经 与 和 06 一人。 本姓 贡 入 太 汪 地 托 了 革 纪 
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9.6 CSS 盒 模型 


9.6.1 CSS 盒 模型 结构 


在 网 页 设计 中 ， 每 个 元 素 都 是 长 方形 的 盒子 ， 便 产生 了 特定 的 盒子 模型 。 在 盒子 模型 
中 ， 重 要 的 概念 有 边界 (Margin)、 边 框 (Border)、 填 充 (Padding)、 内 容 (Content)， 简 


称 为 MBPC 模型 ， 如 图 9-9 所 示 。 边 界 又 称 为 外 边界 〈 外 补丁 或 外 空白 )， 是 盒子 边框 与 
页 面 边界 或 其 他 盒子 之 间 的 距离 。 填 充 又 称 为 内 边界 (内 补丁 或 内 空白 )， 即 内 容 与 边框 之 
间 的 距离 。 






















































































图 9-9 CSS 盒子 模型 


9.6.2 ”边界 属性 设置 


边界 属性 是 margin, 也 称 为 外 边 距 , 表示 盒子 边框 与 页 面 边界 或 其 他 盒子 之 间 的 距离 ， 
属性 值 为 长 度 值 、 百 分 数 或 auto， 属性 设置 的 效果 是 围绕 元 素 边框 的 “空白 ”。 
1. 基本 语法 


margin- (top1right1bottom|lleft) : 长 度 单位 | 百分比 单位 |auto 


2. 语法 说 明 

auto: 表示 采用 默认 值 ， 浏 览 器 计算 边 距 。 

长 度 单位 和 百分比 单位 :参考 9.1 节 的 介绍 进行 设置 。 

设置 边界 需要 设置 四 个 参数 值 ， 分 别 是 表示 “上 、 右 、 下 、 左 ”四 个 边 。 如 果 只 设置 
一 个 参数 值 ， 则 表示 四 个 边界 均 相同 。 如 果 只 设置 两 个 参数 值 ， 那 么 第 1 个 参数 表示 上 、 
下 边界 值 , 第 2 个 参数 表示 左 、 右 边界 。 如 果 设 置 三 个 参数 ， 那 么 第 1 个 参数 表示 上 边界 ， 
第 2 个 参数 表示 左 、 右 边界 ， 第 3 个 参数 表示 下 边界 。 例 如 : 


margin:10px 10px 20px 30px;/* 分 别 设置 上 、 右 、 下 、 左 边界 */ 


margin:10px 20px 10px; /* 设 置 上 边界 为 10px、 左 右边 界 为 20px、 下 边界 为 10px*/ 
margin:20px 10px ; /* 设 置 上 下 边界 为 20px、 左 右边 界 为 10px*/ 
margin:10px ; /* 设 置 4 个 边界 均 为 10px */ 


p{margin-top:20px;} 
p{margin-right:2em;} 
hl{margin-bottom:30px;} 
h3{margin-left:200%;} 


【 例 9-6-1】 设置 边界 属性 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-10 所 示 。 


= ah 9 6 4htnl ==> 


2 <!doctype html> 回 册 


3 <html lang="en"> 、 
4 <head> 视频 讲解 
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5 <meta charset="UTF-8"> 

6 <title> 设 置 边界 属性 </title> 

和 <style type="text/css"> 

8 #pl {background:#99ffcc;margin-top:20px;margin-left:20px;} 


9 #p2{background:#99ffff;margin:20px 30px 20px;} 

10 </style> 

11 </head> 

12 <body> 

13 <h4> 设 置 边界 属性 </h4> 

14 <p idq="p1"> 使 用 CSS+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。</p> 

15 <p id="p2"> 使 用 Css+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 


排版 习惯 。</p> 
16 </body> 
17 </html>0 


SS 个 RAWeb 胡 其 开 号 只- CX 人 SY 


设置 边界 属性 








A Nah 完全 有 别 于 传统 的 表格 排版 习 


使 用 CSS+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。 
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3. 代码 解释 

代码 中 定义 了 两 个 id 样式 ， 第 8 行 定 义 段落 1 背景 颜色 为 #99ffcc、 上 边界 为 20px、 
左边 界 为 20px; 第 9 行 定义 段落 2 背景 颜色 为 #99ffff, 上 边界 为 20px, 左 、 右 边界 为 30px， 
下 边界 为 20px。 


9.6.3 ”边框 属性 设置 


边框 属性 是 border， 用 于 设置 边框 的 宽度 、 样 式 以 及 颜色 。 
1. 边框 样式 border-style 属性 

border-style 属性 用 于 设置 不 同 风 格 的 边框 样式 。 

1) 基本 语法 


border-style:nonelhiddenldottedldqashedlsolidldqouble | groove | ridge | 
inset | outset 


2) 语法 说 明 
语法 中 的 属性 值 如 表 9-11 所 示 。 
表 9-11 border-style 属性 及 说 明 表 


属 性 值 说 明 





none 定义 无 边框 
与 none 相同 。 应 用 于 表 时 例外 ， 用 于 解决 边框 冲突 





dotted 定义 点 状 边框 


dashed 定义 虚线 








double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 











groove 定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 
Tidge | 定义 山 次 状 边框 。 其 效果 取决 于 border-color 的 值 
inset | 定义 使 页 面 沉 入 感 边框 。 其 效果 取决 于 border-color 的 值 





outset 定义 使 页 面 浮 出 感 边框 。 其 效果 取决 于 border-color 的 值 


与 margin 属性 类 似 ,border-style 属性 可 以 设置 多 个 值 。 比 如 下 面 的 规则 为 类 名 为 cont 
的 段落 定义 了 四 种 边框 样式 ， 实 线 上 边框 、 点 线 右 边框 、 虚 线 下 边框 和 点 线 左边 框 。 


p-.cont{border-style: solid dotted dashed ;} 
边框 样式 也 可 以 通过 单 边 样 式 属性 进行 设置 ， 具 有 四 个 单 边 边框 样式 属性 : 


border-top-style: 样式 值 ; 
border-right-style: 样式 值 ; 
border-bottom-style: 样式 值 ; 
border-left-style: 样式 值 ; 


2. 边框 宽度 border-width 属性 
border-width 属性 用 于 设置 边框 的 宽度 ,其 值 可 以 是 长 度 值 或 关键 字 thin、medium、 thick。 
1) 基本 语法 


border-width : medium (默认 值 ) | thin | thick | length 


2) 语法 说 明 

medium: 默认 宽度 。thin: 小 于 默认 宽度 。thick: 大 于 默认 宽度 。length: 请 参考 9.1 
节 的 介绍 进行 设置 。 

border-width 属性 可 以 设置 多 个 值 , 下 面 示例 代码 的 效果 是 设置 上 边框 和 下 边框 为 细 边 
框 、 右 边框 和 左边 框 为 10px。 


border-width: thin 10px; 
边框 宽度 也 可 以 通过 单 边 宽度 属性 进行 设置 ， 具 有 四 个 单 边 边框 宽度 属性 : 


border-top-width: 样式 值 ; 
border-right-width: 样式 值 ; 
border-bottom-width: 样式 值 ; 
border-left-width: 样式 值 ; 


3. 边框 颜色 border-color 属性 

border-color 属性 用 于 设置 边框 的 颜色 ， 与 color 类 似 。 
border-color 属性 可 以 设置 多 个 值 。 

1) 基本 语法 


border-color :color 
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2) 语法 说 明 

color 的 值 可 以 参考 9.4 节 所 给 出 的 方法 设置 。 边 框 颜色 也 可 以 通过 单 边 颜 色 属 性 进行 
设置 ， 具 有 四 个 单 边 边框 颜色 属性 ; 

border-top-color: 样式 值 ; 

border-right-color: 样式 值 ; 


border-bottom-color: 样式 值 ; 
border-left-color: 样式 值 ; 


如 果 对 上 、 下 、 左 、 右 四 条 边框 设置 同样 的 样式 、 宽 度 、 颜 色 ， 可 以 直接 使 用 border 
属性 ， 例 如 下 面 的 示例 代码 为 类 名 为 d2 的 div 设置 了 厚 边框 、 实 线 、 红 色 。 


div.d2{border: thick solid red;} 


4， 边框 border 复合 属性 
边框 border 是 一 个 复合 属性 ， 可 以 一 次 设置 边框 的 粗细 、 样 式 和 颜色 。 
1) 基本 语法 


border: border-width | border-style | border-color 


2) 语法 说 明 
该 属性 是 复合 属性 。 请 参阅 各 参数 对 应 的 属性 。 
【 例 9-6-2】 设 置 边框 属性 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-11 所 示 。 


1 <!-- edu 9 6 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 设 置 边框 </title> 

7 <style type="text/css"> 

8 #pl {background:#99ffcc;border:15px groove #33ff66 ;} 

9 #p2 {border-style: dashed solid;} 

10 #p3{border-style:solid;border-width:8px 10px;} 

和 h4{text-align:center;padding:10px;background:#99cc99;} 
12 </style> 


13 </head> 
14 <body> 


15 <h4> 设 置 边界 </h4> 

16 <p id="p1"> 使 用 Css+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。</p> 

17 <p id="p2"> 使 用 CSS+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。</p> 

18 <p id="p3"> 使 用 CSS+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。</p> 

19 </body> 

20 </html> 

3) 代码 解释 


代码 中 定义 段落 的 三 个 id 样式 ， 第 8 行 定 义 段落 1 背景 颜色 为 #99ffcc， 采 用 border 
复合 属性 设置 边框 为 粗细 为 15px、 线 型 为 groove、 颜 色 为 #33ff66; 第 9 行 定 义 段落 2 边框 


样式 上 下 边框 为 dashed、 左 右边 框 为 solid; 第 10 行 定义 段落 3 边框 样式 为 实 线 型 ， 上 下 
边框 为 8px、 左 右边 框 为 10px。 
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9.6.4 填充 属性 设置 


填充 属性 是 padding， 也 称 为 内 边界 ， 表 示 元 素 内 容 与 边框 之 间 的 距离 ， 属 性 值 为 长 度 
值 、 百 分 数 ， 属 性 设置 的 效果 是 包含 在 元 素 边 框 里面 并 围绕 着 元 素 内 容 的 “元 素 背 景 ” 也 
称 内 空白 。 

1. 基本 语法 


padding :长度 | 百 分 比 


2. 语法 说 明 

padding 属性 可 以 为 一 个 、 二 个 、 三 个 和 四 个 值 。 表 示 方 法 同 边框 属性 设置 类 似 。 
填充 效果 也 可 以 通过 单 边 填 充 属性 进行 设置 ， 具 有 四 个 单 边 填充 属性 。 

。 padding-top: 长 度 | 百分比 。 

。 padding-right: 长 度 | 百分比 。 

。 padding-bottom: 长 度 | 百分比 。 

。 padding-left: 长 度 | 百分比 。 


padding 属性 值 的 设置 如 下 所 示 : 

hl { padding-top:10px; /* 分 别 表示 上 内 边界 */ 
padding-right:0.5em; /* 分 别 表示 右 内 边界 */ 
padding-bottom: 5px; /* 分 别 表示 下 内 边界 */ 
padding-left:20%; /* 分 别 表示 左 内 边界 */ } 


p{padding:10px 20px 30px 40px} /* 分 别 表示 上 、 右 、 下 、 左 内 边界 */ 


【 例 9-6-3】 设 置 填充 属性 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 9-12 所 示 。 


1 == edu 9 6 3.htnl ==-> 
2 <!doctype html> 

3 <html lang="en"> 

4 <head> 视频 讲 
5 <meta charset="UTF-8"> 


6 <title> 设 置 填充 属性 </title> 
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7 <style type="text/css"> 
8 #pl {background:#99ffcc;padding:15px 20px 15px;} 
9 #p2 {background:#99ff£99;border-style:dashed;padding-top:20px; 
padding-bottom:20px;} 
10 #p3{background:#99cccc;border-style:solid;padding-left:50px; 
padding-right:20px;} 
11 h4{text-align:center;padding:10px;background:#99cc99;} 
12 </style> 
13 </head> 
14 <body> 
15 <h4> 设 置 填充 属性 </h4> 
16 <p id="p1"> 使 用 CSs+DIV 进 行 页 面 布 局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。</p> 
和 <p id="p2"> 使 用 CSS+DIV 进 行 页 面 布局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 
排版 习惯 。</p> 
18 <p id="p3"> 使 用 Css+DIV 进 行 页 面 布 局 是 一 种 全 新 的 体验 ， 完 全 有 别 于 传统 的 表格 


排版 习惯 。</p> 
19 </body> 
20 </html> 

















9-12 设置 填充 属性 


3. 代码 解释 

代码 中 定义 三 个 id 样式 ,第 8 行 定 义 段 落 1 背景 颜色 为 #99ffcce， 采 用 padding 复合 属 
性 设置 内 边界 分 别 是 上 15px、 左 右 20px、 下 15px; 第 9 行 定义 段落 2 背景 颜色 为 #99ff99， 
并 设置 上 内 边界 20px、 下 内 边界 20px; 第 10 行 定义 段落 3 背景 颜色 为 #99cccc， 并 设置 左 
内 边界 50px、 右 内 边界 20px。 


9.7 综合 实例 


以 上 海 美术 科技 信息 发 展 有 限 公 司 旗下 网 站 一 一 “建站 之 星 ” 中 提供 的 通用 模板 〈 模 
板 号 : 2576) 为 例 (http://sitestarcndns.com/website/templates.aspx# )， 模 仿 设 计 “ 中 国 环宇 
科技 有 限 公 司 ” 网 站 ， 如 图 9-13 所 示 。 采 用 div 完成 布局 设计 ， 编 写 相关 CSS 文件 完成 页 
面 美 化 工作 。 

1. 页 面 布 局 规划 

根据 图 9-13 页 面 布局 效果 , 很 容易 看 出 这 是 标准 5 行 2 列 布局 样式 。 使 用 布局 绘图 软 


件 画 出 布局 图 ， 如 图 9-14 所 示 。 
Smart Business Solutions 
Corpore 
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关于 我 们 合作 伙 件 

















国 字 科技 有 限 公 司 是 于 1983 生 为 了 通过 斌 对 证 作 技术 的 女 打 以 提高 记 业 技术 而 XX 作 办 服务 公 司 
字 的 洪 验 评价 机 构 ， 是 加 千秋 《发达 ) 于 家 的 试 驴 、 认 证 机 榴 进行 交流 和 言 作 的 济 玲 XX 企业 志 务 有 限 公司 
代表 性 桂 构 。 为 了 保护 本 国产 业 的 各 种 认 证 钊 到 日 和 去 善 ， 为 保 沪 滑 当 者 安 二 有 和 

9 营利 度 的 重要 性 日 下 所 朋 ，KTL 力 过 信 形 姑 鸭 训 属 ,从 产品 开 才 于 得 凡 。。 上 海 XX 吉利 民办 机 构 

个 内 和 提 汉 拓 ， 枯 二 企业 提 融 技术 化 力 ! 扫 页 的 训 凶 力 - 中 国 东 六 商业 台 伯 社 

下行 
有 XX 从 
中 国 其 革 阿 业 合作 社 


eRe 


人 ， 权 册 的 证 ， 产 是 内 巷 、 寺 音 员 服务， 语 寻 人 下 用 ， 儿 除 作 在 认证 D8 有 之 尼 ， 
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图 9-13 通用 模板 截图 
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2. 写 出 div 结构 代码 
新 建 一 个 HIML 文档 ， 编 写 如 下 的 div 嵌 套 结构 代码 。 


1 <div id="container" class=""> 

用 <div id="header" class=""> 

3 <div id="logo" class=""></div> 
4 

呈 





<div id="select" class=""></div> 
</div> 
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6 <div id="picture" class=""></div> 

7 nav" class </div> 

8 main" class 

学 <div id="left" class=""></div> 
10 <div id="right" class: ></div> 
11 </div> 

4 <div id="footer" class=""> 

3 </div> 

14 </div> 


3. 构造 huanyu.css 框架 结构 文件 
根据 div 结构 中 的 ID 定义 CSS 文件 中 id 样式， 必须 与 div 结构 一 一 对 应 。 


/* huanyu.css */ 
#container{} 
#header{} 
#1logo{} 
#picture{} 
#main{} 

#1left{} 

#right{} 
#footer{} 


4. 编写 HTML 代码 


1 <!l-= 6da 9 7 1.htnl ==> 
2 <!doctype html> 
3 <html lang="en"> 


omwawm 必 wm 


















4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 中 国 环宇 科技 有 限 公 司 网 站 </title> 
浊 <link type="text/css" rel="stylesheet" href="css/huanyu.css" > 
8 </head> 
9 <body> 
10 <div id="container" class > 
11 <div id="header" class=""> 
12 <div id="logo" class=""> 
FE <img src="images/logo.png" border="0" alt=""> 
14 </div> 
35 <div id="select" class=""> 
16 <select name="" id="sel"> 
二 selected> 简 体 中 文 </option> 
18 > 繁体 中 文 </option> 
19 <option value="">ENGLISH</option> 
20 </select> 
21 </div> 
22 </div> 
23 <div id="picture" class=""> 
24 <img src="images/huanyu.jpg" width="990" height="345" border="0" 
alt=s"™"> 
25 </div> 
26 <div id="nav" 
27 <table width="100%" height="40px" align="center" 
cellpadding="0px" cellspacing="0px"> 
28 < 
29 <td><a href=""> 首 页 </a></td> 
30 <td><a href=""> 关 于 我 们 </a></td> 


3 <td><a href=""> 服 务 项 目 </a></td> 


32 <td><a href=""> 合 作 伙 伴 </a></td> 





33 <td><a href=""> 联 系 我 们 </a></td> 

34 </tr> 

35 </table> 

36 </div> 

3 <div id="main" class=""> 

38 <div id="left" class=""> 

39 <h1> 关 于 我 们 </h1> 

40 <div id="left-up" class=""> 

41 <img src="images/xwjj.jpg" border="0" alt=""> 
42 <p> 中 国 环宇 科技 有 限 公 司 是 于 1985 年 为 了 通过 试验 评价 技术 的 


支援 以 提高 产业 技术 而 成 立 的 试验 评价 机 构 ， 是 和 先进 〈 发 达 ) 
国家 的 试验 、 认 证 机 构 进行 交流 和 合作 的 某 代表 性 机 构 。 为 了 保 
护 本 国产 业 的 各 种 认证 制度 日 渐 完善 ， 为 保护 消费 者 安全 和 环境 
的 各 种 制度 的 重要 性 日 趋 增加 ，KTL 为 适应 形势 的 发 展 ， 从 产品 
开发 到 获得 认证 的 整个 阶段 提供 支援 ， 以 帮助 企业 提高 技术 能 力 


以 及 拥有 更 强 的 竞争 力 。</p> 


43 </div> 

44 <div id="left-down" class=""> 

45 <img src="images/icol.gif" border="0" alt=""> 

46 <p id="p1"> 我 们 的 服务 ; 权威 性 的 认证 ， 严 谨 规 范 、 完 善 周 到 
的 服务 ， 合 理 公平 的 费用 ， 解 除 您 在 认证 方面 的 后 顾 之 忧 。</P> 

47 </div> 

48 </div> 

49 <div id="right" class=""> 

50 <h1> 合 作 伙 伴 </h1> 

51 <ul> 

52 <1i>XX 代 办 服务 公司 </1i> 

53 <1i> 香 港 XX 企 业 服务 有 限 公司 </1i> 

54 <1i> 上 海 XX 专 利 代办 机 构 </1i> 

55 <1i> 中 国 某 某 商 业 合作 社 </1i> 

56 <1i> 南 京 某 某 商业 银行 </1i> 

<1i> 日 本 XX 会 社 </1i> 

58 <1i> 中 国 某 某 商业 合作 社 </1i> 

59 </ul> 

60 </div> 

61 </div> 

62 <div id="footer" class=""> 

63 <p>COPY RIGHT &copy;&nbsp; gnbsp; gnbsp; 中 国 环宇 科技 有 限 公司 


&nbsp; gnbsp; 科技 事业 部 支持 京 备 XXXXX-342</p> 
64 </div> 


65 </div> 
66 </body> 
67 </html> 


S. 编写 具有 真实 效果 的 CSS 文件 


1 /* huanyu.css */ 

2 *{font-size:12px;font-family:Times New Roman;} 
3 #container{margin:0 auto;padding:0 auto;} 

4 #header{width:990px;height:65px;margin:0 auto;} 
5 #logo{width:263px; height:65px; float:left; 


background:url ("images/logo.png") no-repeat left bottom;} 


#select{width:727px; height:65px; 
float:left;text-align:right;} 
7 #select #sel{margin-top:15px;} 
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8 #picture{width:990px;height:345px; clear:both;} 
9 #nav{width:990px;height:40px; 
background:#0099CC; border:0px;} 

10 a:link,a:visited,a:active{text-decoration:none;color:#FFFFFF;} 

11 #nav a:hover{color:#333333;text-decoration:none;background:#F6F6F6;} 

12 #nav a{width:194px;height:40px;} 

13 td{line-height:40px;font-size:18px;text-align:center;vertical-align: 

middle;} 
14 #main{width:990px; height:250px; } 
15 #left{width:660px;height:250px; 
float:left;line-height:1.5em;} 

16 hl{color:#0099FF;font-size:18px; 
height:36px; border-bottom:2px solid #0099FF;} 

17 #left img{float:left;width:220px;height:144px;} 

18 #left-down{margin:0px auto;padding:0px; 
clear:both;width:100%;height:70px;} 

19 #left-down img{vertical-align:text-bottom; 
width:60px;height:50px;vertical-align:bottom;} 

20 #pl{padding-top:20px;height:30px;} 

21 #right{width:290px; height:250px; 
float:right; border:1lpx solid #00ff00;} 

22 ul{width:200px;height:100%;padding:0px;margin:0 auto;} 

23 li{padding:0px;margin:0px;line-height:2em; 

24 list-style-type:none;text-align:left;} 

25 #footer{clear:both; width:990px;height:30px; 
background:#F7F7F7; border-top:2px solid #0099FF;} 

26 #footer p{padding:10px auto;text-align:center;color:#333333;} 


本 章 小 结 


本 章 主要 介绍 了 CSS 的 各 种 样式 属性 ， 包 括 文字 样式 、 文 本 样式 、 颜 色 、 背 景 、 列 表 
等 。 这 些 属性 有 的 具有 子 属性 ， 从 不 同方 面 描述 外 观 样 式 ， 因 而 比较 灵活 ， 既 可 以 使 用 单 
个 子 属性 定义 某 一 方面 的 样式 ， 又 可 以 使 用 复合 属性 定义 整体 的 样式 ， 在 使 用 时 应 注意 属 
性 与 属性 之 间 的 顺序 及 制约 关系 。 

同时 也 重点 介绍 了 CSS 盒 模型 ， 它 既是 CSS 的 精华 ， 也 是 学 习 的 难点 。 如 果 把 页 面 
元 素 以 “盒子 ”的 方式 呈现 ， 那 么 便 有 了 元 素 边 界 、 元 素 边 框 、 填 充 、 元 素 内 容 这 些 重要 
概念 。 盒 子 具 有 四 条 边 ， 所 以 这 些 属 性 都 各 有 四 个 单 边 子 属 性 ， 在 使 用 时 可 以 直接 对 某 一 
条 边 应 用 单 边 子 属性 设置 其 样式 ， 也 可 以 按照 一 定 顺序 依次 设置 各 边 的 样式 ， 设 置 方式 比 


较 灵 活 。 
练习 与 实验 
练习 9 
1. 选择 题 
(1) 下 列 不 属于 CSS 盒 模型 的 属性 是 ( )。 
(A) margin (B) padding (C) border (D) font 


(2) 边框 的 复合 属性 中 不 包括 ( )。 


(A) 粗细 (B) 长 短 (C) 颜色 (CD) 样式 
(3) 下 列 可 以 去 掉 文本 超 链接 的 下 画 线 的 是 ( )。 


(A) aftext-decoration:no underline;} (B) afunderline:none:} 


(C) a{underline:false;} (D) aftext-decoration:none:} 
(4) 下 列 不 属于 CSS 文本 对 齐 属性 取 值 的 是 ( )。 
(A) auto (B) left (C) center (D) right 


(5) CSS 规则 pfmargin:20px 10px:} 的 效果 是 ( )。 
(A) 仅 设 置 了 上 边 距 为 20px， 以 及 右边 距 为 10px 
(B) 仅 设置 了 上 边 距 为 20px， 以 及 下 边 距 为 10px 
(C) 设置 了 上 、 下 边 距 为 20px， 以 及 左 、 右 边 距 为 10px 
(D) 设置 了 上 、 右 边 距 为 20px， 以 及 下 、 左 边 距 为 10px 





2. 填空 题 

(1) 段落 缩 进 的 属性 是 ; 文本 居中 对 齐 的 声明 

(2) 实现 背景 图 像 在 水 平方 向 平 铺 的 声明 ; 设置 背景 图 像 位 置 的 属 
性 是 

(3) 设置 文字 颜色 为 红色 的 声明 〈 写 出 其 值 可 能 的 所 有 形式 ) 是 color: 

(4) 声明 “border: 2px double red; ”的 含义 是 。 

3. 简 答题 


(1) 简 述 CSS 盒 模型 概念 。 通 过 哪些 属性 可 以 描述 一 个 具体 的 CSS 盒 模型 ? 
(2) 简 述 CSS 列表 样式 属性 及 其 取 值 情况 。 


实验 9 


1. 编写 效果 如 图 9-15 所 示 的 网 页 。 网 页 中 由 左 、 右 两 个 图 层 构 成 ， 左 边 div 设置 背 
景 图 像 ， 图 像 居中 显示 ， 右 边 div 设置 背景 图 像 填 充 效果 ， 添 加 有 效果 文字 内 容 。 设 计 要 
求 如 下 : 

(1) HTML 中 div 结构 如 下 : 


1 <div id="wrap"> 

<div id="pic"></div> 

3 <div id="text"> 

4 <div ig="title"> 木 兰花 令 . 拟 古 决绝 词 </div> 
你 <div id="author"> 纳 兰 性 德 </div> 

6 <div id="content"> 

学 

8 


<p> 人 生 若 只 如 初 见 ，</p> 


9 </div> 
10 </div> 
11 </div> 


(2) 内 容 为 “人 生 若 只 如 初 见 ， 何 事 秋风 悲 画 扇 。 等 闲 变 却 故 人 心 ， 却 道 故 心 人 易 变 。 
骊 山 雨 墨 清 宵 半 ， 泪 雨 霖 铃 终 不 忽 。 何 如 薄 幸 锦衣 郎 ， 比 辟 连 枝 当日 愿 。。 
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图 9-15 木兰 花 令 效果 图 


(3) 样式 说 明 。 

#wrap: 宽度 900px、 边 界 0 auto、 边 框 红色 2px 实 线 、 上 边界 5px。div: 文本 居中 对 
齐 。#pic: 宽度 420px、 高 度 300px、 背 景 图 像 为 ex8.jpg、 不 重复 、 位 置 居 中 、 图 像 向 左 浮 
动 、 背 景色 为 #77A。#text: 背景 图 像 为 ex8.jpg、 向 右 浮动 、 宽 度 420px、 高 度 S00px、 背 
景色 为 #77A、 填 充 为 10px、 字 体 粗 细 为 bold。#title: 字体 为 “华文 彩云 和 大 小 为 32px。 
#author: 字号 大 小 为 12px、 字 体 为 黑体 、 文 字 右 对 齐 、 下 边界 为 24px。p: 字体 为 隶书 、 
字号 大 小 为 24px、 边 界 为 2px、 字 符 间距 为 0.5em、 行 高 为 1.5em、 文 字 居 中 对 齐 。 

2. 设计 如 图 9-16 所 示 的 图 文 并 茂 的 页 面 。 设 计 要 求 : 

(1) 插入 图 像 为 cup.jpg， 图 像 向 左 浮动 、 边 框 为 “1px 虚线 、 颜 色 为 gray” 边界 为 
“10px 10px 10px 0” 填充 为 Spx。 

(2) Mobile 首 字母 样式 为 “大 小 3em、 向 左 浮动 ”。 

(3) hl 样式 为 “文字 居中 、 和 白色、 背景 为 #678”。 


me 
Sewn SP- Ox] Suesine “上 


Head Line 





[Vl obie widget 使 用 的 标准 的 web 技术 ,如 HTML，cSss， 


javascripf 壬 。 这 些 经 典 的 Web 技 术 规 范 是 白 W3C (万 维 网 联盟 ) 
: 的 下 属 各 个 工作 组 制定 并 推进 的 . 作为 开发 Widget 之 前 的 知识 准 
备 ， 在 本 章 中 我 们 将 逐一 介绍 这 些 技术 




















9-16 页 面 效果 图 





第 10 章 DIV+CSS 页 面 布 局 


本 章 学 习 目标 


本 章 重点 介绍 使 用 DIV+CSS 来 规划 各 种 页 面 布局 方法 、 步 骤 以 及 CSS 文件 定义 等 ， 
学 会 在 不 同 的 浏览 器 上 进行 页 面 效果 的 调试 。 
Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 
熟练 地 使 用 DIV 标记 的 CSS 各 类 属性 。 
掌握 CSS 定义 与 引用 方法 ， 学 会 使 用 外 部 样式 表 定 义 页 面 样式 。 
熟悉 各 类 常见 的 页 面 布 局 类 型 ， 能 够 写 出 相应 的 DIV 结构 及 CSS 规则 。 
学 会 使 用 DIV+CSS 进行 页 面 布局 ， 能 够 编写 HTML 代码 和 CSS 文件。 


10.1 页 面 布 局 设计 


现在 所 有 的 主流 的 、 大 型 的 开 企业 的 网 站 布局 几乎 都 采用 DIV、CSS 技术 ， 有 些 甚 至 采 
用 DIV、CSS、 表 格 混合 进行 页 面 布局 。 此 类 页 面 布局 能 够 实现 页 面 内容 与 表现 的 分 离 ， 
提高 网 站 访问 速度 、 节 省 宽带 、 改 善 用 户 的 体验 。DIV+CSS 组 合 技术 完全 有 别 于 传统 的 表 
格 排版 习惯 。 通 过 DIV+CSS 实现 页 面 元 素 精确 控制 ， 网 站 风格 、 代 码 维护 与 更 新 变 得 十 分 容 
易 ， 甚 至 是 页 面 的 布局 结构 都 可 以 通过 修改 CSS 属性 来 重新 定位 。 

DIV+CSS 布局 的 步骤 大 致 为 : 首先 整体 上 对 页 面 进行 分 块 ， 接 着 按照 分 块 设计 使 用 div 标 
记 ， 并 理 清 div 标记 的 嵌 套 和 层 登 关系， 然后 对 各 div 标记 进行 CSS 定位 ， 最 后 在 各 个 分 
块 中 添加 相应 的 内 容 。 

下 面 重 点 介绍 常用 的 页 面 布 局 案例 。 


10.1.1 “三 行 模式 ”或 “三 列 模式 ” 


此 模式 特点 是 把 整个 页 面 水 平 、 垂 直 分 成 三 个 区 域 ， 其 中 “三 行 模式 ”将 页 面 分 成 头 
部 、 主 体 及 页 脚 三 部 分 ;“ 三 列 模式 ”将 页 面 分 成 左 、 中 、 右 三 个 部 分 ， 如 图 10-1 所 示 。 








1. 三 行 模式 2. 三 列 模式 


图 10-1 常用 页 面 布局 模式 之 一 


Web 坟 弦 开 阁 故 大 一 TIMT5、CSS3、JavaScript ( 筑 3 族 ) 





根据 页 面 布局 情况 ， 写 出 页 面 的 div 结构 ， 两 个 模式 div 结构 相似 ， 有 具体 代码 如 下 : 


<div id="header" class=""></div> 
<div id="main" class=""></div> 


<div id="footer" class=""></div> 


然后 编写 相应 的 CSS 文件 ， 分 别 如 下 所 示 : 
1. 三 行 模式 





/* layoutl.css */ 

#header {width:100%;height:120px;background:#223344;} 
#main{width:100%;height:500px;background:#553344;} 
#footer{width:100%;height:40px;background:#993344;} 


2. 三 列 模式 





Be 


/* layout2.css */ . 
视频 讲解 


#1left{width:30%;height:700px;background:#223344;float:left;} 
#center{width:50%;height:700px;background:#553344; float:left;} 
#right {width:20%;height:700px;background:#993344; float:left;} 


10.1.2 “三 行 二 列 ”“ 三 行 三 列 ” 模 式 
此 模式 特点 是 先 将 整个 页 面 水 平分 成 三 个 区 域 ， 再 将 中 间 区 域 分 成 两 列 或 三 列 ， 如 图 


10-2 所 示 。 


3. 三 行 二 列 模式 4. 三 行 三 列 模式 
图 10-2 常用 页 面 布局 模式 之 二 


对 图 10-2 所 示 的 页 面 进行 布局 div 结构 。 两 种 模式 的 div 结构 分 别 如 下 : 
。 三 行 二 列 模式 的 div 结构 。 


<div id="header" class=""> header </div> 
<div id="main" class=""> 
<div id="left" class=""> left </div> 
<div id="right" class=""> right </div> 


RODPp 


</div> 


6 <div id="footer" class=""> footer </div> 
。 三 行 三 列 模式 的 div 结构 。 


<div id="header" class=""> header </div> 





<div id="main" class=""> 
<div id="left" class=""> left </div> 
<div id="center" class=""> center </div> 
<div id="right" class=""> right </div> 
</div> 


<div id="footer" class=""> footer </div> 


然后 编写 两 种 模式 相应 的 CSS 文件 。 
。 三 行 二 列 模式 的 CSS 定义 。 


auwm 必 wmN 






/* layout3.css */ = 
#header {width:100%;height:120px;background:#99ff00;} 视频 讲解 
#main{width:100%;height:400px;background:#99ff99;} 
#left{width:30%;height:100%;float:left;background:#999999;} 

#right {width:70%;height:100%;float:left;background:#553344;} 
#footer{clear:both;width:100%;height:80px;background:#66ff66;} 


。 三 行 三 列 模式 的 CSS 定义 。 


/* layout4.css */ 

#header {width:100%;height:120px;background:#99ff00;} 
#main{width:100%;height:400px;background:#99ff99;} 
#left{width:30%;height:100%;float:left;background:#999999;} 
#center{width:40%;height:100%;float:left;background:#FF3344;} 
#right {width:30%;height:100%;float:left;background:#553344;} 
#footer{clear:both;width:100%;height:80px;background:#99ff66;} 


在 “三 行 三 列 模式 ”中 ， 三 列 div 可 以 同时 向 左 、 向 右 浮动 ， 也 可 以 左 、 中 div 向 左 、 
右 div 向 右 浮动 或 左 div 向 左 浮动 ， 中 、 右 div 向 右 浮动 。 另 外 还 可 以 左 div 向 左 浮动 ， 右 
div 向 右 浮动 ， 中 间 div 不 浮动 ,而 是 设置 填充 padding 属性 来 实现 布局 ， 只 是 中 间 div (不 
浮动 的 div) 必须 放 在 浮动 div 的 后 面 才能 生效 ， 否 则 布局 会 混乱 。 

在 实际 使 用 div 进行 页 面 分 块 的 过 程 中 ， 需 要 注意 的 一 个 问题 是 ， 浮 动 的 div 的 后 续 
div 中 一 定 要 先 清除 图 层 浮 动 ， 否 则 会 影响 其 后 div 的 显示 效果 。 方 法 如 下 : 


#div n{clear:both|left|right;} 


。 三 列 中 的 中 间 div 不 浮动 时 的 div 结构 。 











1 <div id="header" class=""> header </div> 

2 <div id="main" class=""> 

1 <div id="left" class=""> left </div> <!-- 浮动 的 div --> 
4 <div id="right" class=""> right </div> <!-- 浮动 的 div --> 





DIV+CSS 页 历 太 羽 


Web 育 弦 开交 老大 一 TINMTI、CSS3、JavaScript ( 筑 3 族 ) 





5 <div id="center" class=""> center </div> <!-- 不 浮动 的 div --> 
</div> 
7 <div id="footer" class=""> footer </div> 


。 三 列 中 的 中 间 div 不 浮动 时 的 CSS 文件 定义 。 


en 


/* layout4 1.css */ 

#header {width:100%;height:120px;background:#99ff00;} 
#main{width:100%;height:400px;background:#99ff99;} 
#1left{width:30%;height:100%;float:left;background:#999999;} 
#center{padding:0px 30%;height:100%;background:#FF3344;} /* 不 浮动 div*/ 
#right {width:30%;height:100%;float:right;background:#553344;} 
#footer{clear:both;width:100%;height:80px;background:#99ff66;} 


10.1.3 多 行 多 列 复杂 模式 


国内 大 型 商业 网 站 基本 上 多 行 多 列 模式 布局 ， 如 图 10-3 所 示 。 例 如 中 央 人 民政 府 、 中 
关 村 在 线 、 淘 宝 网 、 腾 讯 、 网 易 、 新 浪 、 搜 狐 、 人 民 网 等 网 站 采用 “多 行 三 列 模式 ” 公安 
部 、 财 政 部 、 阿 里 巴巴 、 网 上 超市 1 号 店 、 去 哪儿 网 、 赶 集 网 等 网 站 采用 “多 行 四 列 模 式 ”。 
其 他 大 多 数 网 站 布局 根据 首页 的 长 度 变化 而 略 有 差异 ， 在 此 不 再 一 一 叙述 。 

根据 图 10-3 所 示 进 行 页 面 布局 设计 。 此 处 仅 对 “多 行 三 列 模式 ”的 页 面 布局 进行 div 
结构 划分 ， 对 “多 行 四 列 模式 ”读者 可 以 自行 模仿 写 出 div 结构 。 


本 


5 多 行 三 列 模式 6 多 行 四 列 模式 








10-3 多 行 多 列 复杂 模式 
。 多 行 三 列 模式 的 div 结构 。 


1 <div id="container" class=""> 

放 <div id="header" class=""> 

3 <div id="logo" class="">logo</div> 
4 <div id="nav" class="">nav</div> 

5 </div> 
6 
7 
8 
9 
0 





<div id="main" class=""> 

<div id="left" class=""> 
<div 1d="laft up 1” class—”""Sloft up lL</divs 
<div id="left up 2" class="">]left up 2</div> 


Ee <div id="left down 1" class="">left down 1</div> 


3 <div id="left down 2" class="">left down 2</div> 


</div> 

让 <div id="center" class=""> 

14 <div id="center up" class="">center up</div> 
15 <div id="center down" class="">center down</div> 
16 </div> 加 一 

| <div id="right" class=""> 

18 <div id="right up" class="">right up</div> 

19 <div id="right down" class="">right down</div> 
20 </div> 加 加 

21 </div> 

22 <div id="footer" class="">footer</div> 

23 </div> 


。 多 行 三 列 模式 的 CSS 定义 。 


/* layout5.css */ 

*{font-size:16px;margin:0 auto;padding:0px;} 
#container{background:#334455;width:100%;height:700px;} 
#header {background:#FF4455;width:100%;height:150px;} 
#logo{background:#FFDD55;width:100%;height:100px;} 
#nav{background:#FFDD99;width:100%;height:50px;} 
#main{background:#33DD55;width:100%;height:500px;} 
#left{background:#33FBFB;width:33%;height:100%;float:left;} 
#1left up 1{background:#99BBDD;width:100%;height:125px;} 

10 #left up 2{background:#AABBCC;width:100%;height:125px;} 

11 #left down 1l{background:#BBCCDD;width:100%;height:125px;} 

12 #left down 2{background:#CCDDEE;width:100%;height:125px;} 

13 #center{background:#88FBFB;width:34%;height:100%;float:left;} 
14 #center up{background:#66ff66;width:100%;height:200px;} 

15 #center down{background:#45DD22;width:100%;height:300px;} 

16 #right{background:#DDFBFB;width:33%;height:100%;float:left;} 
17 #right up{background:#55DDFB;width:100%;height:150px;} 

18 #right down{background:#667733;width:100%;height:350px;} 

19 #footer{background:#DDDD11;width:100%;height:50px;} 


在 HTML 代码 中 链接 外 部 样式 表 layout5.css， 并 在 浏览 器 中 打开 edu_10_1_5.html 页 
面 ， 效 果 如 图 10-4 所 示 。 


品 ownawm 必 wm 
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图 10-4 多 行 三 列 布局 效果 图 
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10.2 ”导航 菜单 设计 


导航 菜单 是 网 站 重要 的 组 成 部 分 。 导 航 菜单 的 设计 关系 着 网 站 的 可 用 性 和 用 户 体验 ， 
有 吸引 力 的 导航 能 够 吸引 用 户 去 浏览 更 多 的 网 站 内 容 。 设 计 一 个 优秀 的 页 面 导航 菜 单 会 给 
网 站 增色 不 少 。 作 为 一 名 Web 前 端 开发 工程 师 必须 掌握 传统 的 网 站 导航 菜单 设计 技巧 , 同 
时 也 需要 学 习 响 应 式 导航 菜单 的 设计 方法 。 

网 站 菜单 表现 形式 丰富 多 样 。 从 菜单 层次 上 看 ， 可 以 分 为 一 级 、 二 级 和 多 级 菜单 。 从 
排列 方式 上 看 ， 可 分 为 水 平 导航 、 垂 直 导 航 菜单 。 从 技术 实现 角度 上 看 ， 导 航 菜单 通常 采 
用 无 序列 表 、 表 格 、 超 链接 和 样式 表 相 结合 的 方法 来 实现 , 也 可 以 使 用 如 CSS3 Menu jQuery 
等 第 三 方 插件 技术 来 实现 。 

10.2.1 一 级 水 平 导航 菜单 

1. 采用 “表格 + 超 链接 ”来 设计 

使 用 表格 布局 设计 一 级 导航 菜单 非常 容易 而 且 布 局 均匀 ， 根 据 导航 栏目 数量 确定 表格 
的 列 数 。 采 用 1 行 10 列表 格 ， 第 1、 第 10 单元 格 插入 空格 ， 留 出 左右 边 空白 ， 其 余 单元 
格 内 插入 超 链接 即 可 实现 ， 代 码 如 下 所 示 : 





1 <table> 

2 <tr> 

<td>gnbsp;</td> 

4 <td><a href="#"> 首 页 </a> </td> 

5 <td><a href="#"> 期 刊 介绍 </a></td> 

6 <td><a href="#"> 编 委 会 /董事 会 </a></td> 
7 <td><a href="#"> 常 见 问题 及 解答 </a></td> 
8 <td><a href="#"> 常 用 文档 下 载 </a></td> 


9 <td><a href="#"> 订 阅 </a></td> 

10 <td><a href="#"> 过 刊 浏览 </a></td> 
ei <td><a href="#"> 优 先 出 版 </a> </td> 
12 <td>gnbsp;</td> 

#3 </tr> 


14 </table> 


上 述 代 码 中 第 3 行 、 第 12 行 单元 格 是 插入 空格 , 第 4 一 11 行 单元 格 是 利用 超 链 接 定义 
导航 菜单 。 
对 超 链接 和 表格 定义 样式 如 下 : 
table{width:978px;height :40px; text-align:center;background:url ("nav blue.jpg");} 
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFFFFF;} 
a:hover{color:red;border-bottom: 5px solid #FF0000;} 
应 用 上 述 CSS 样式 后 导航 菜单 样式 如 图 10-5 所 示 。 
2. 采用 “无 序列 表 + 超 链接 ”来 设计 
采用 无 序列 表 设计 “一 级 水 平 导航 菜单 ”需要 做 两 件 事 : 一 是 要 去 掉 列 表 项 前 面 的 符 
二 是 将 垂直 显示 的 列表 项 转换 成 水 平 显示 。 


中 


让 表格 + 起 链接 立 现 导航 训 单 -下 
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图 10-5 采用 表格 和 超 链 接 制 作 导航 菜单 效果 图 





以 “计算 机 应 用 研究 ”杂志 网 站 的 导航 为 例 , 采用 无 序列 表 设 计 期 刊 网 站 的 导航 菜单 ， 
其 实现 的 HIML 代码 如 下 所 示 : 


1 <div id="nav" class=""> 

<div class="navwrap"> 

3 <ul> 

4 <1i><a href="/"> 首 页 </a></1i> 

5 <1i><a href="/html/intro.html"> 期 刊 介 绍 </a></1i> 

6 <li><a href="/html/editorial board.html"> 编 委 会 /董事 会 </a></1i> 
加 <1i><a href="/html/faq.html"> 常 见 问题 及 解答 </a></1i> 

8 <1i><a href="/html/downloads.html"> 常 用 文档 下 载 </a></1i> 
9 <li><a href="/html/subscribe.html"> 订 阅 </a></1i> 

10 <1i><a href="/article/01-index.html"> 过 刊 浏览 </a></1i> 
11 <1i><a href="/article/02-index.html"> 优 先 出 版 </a></1i> 
12 </ul> 

13 </div> 

14 </div> 


对 无 序列 表 、 列 表 项 分 别 定义 如 下 的 CSS 样式 后 ， 导 航 菜单 已 由 默认 垂直 排列 状态 改 
为 水 平 排列 方式 ， 列 表 项 前 面 没有 符号 ， 如 图 10-6 所 示 。 


1 /* 计算 机 应 用 研究 杂志 网 站 导航 CSS */ 

2 #nav {width: 100%;font-size: 12px; 

3 background: #004183 url("nav blue.jpg") top center repeat-x;} 
4 .navwrap {width: 978px; height: 40px; margin: 0 auto; 

5 background: url("nav blue.jpg") top center repeat-x;/* 设置 背景 图 像 */} 
6 ul{width: 898px;height: 40px;margin: 0;padding: 0 0 0 130px; 

7 1ist-style: none;/* 去 除 列表 项 前 的 符号 */} 

8 1i{float: left;/* 设 置 列 表 项 浮动 */} 

9 a{line-height: 40px;font-weight: bold; 

10 margin: 0 10px;color: #fff;text-decoration: none;} 

11 a:hover {color: #ff3d3d;} 


请 计算 机 应 用 研究 妇 吉 网 站 导航 - Windows 
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图 10-6 采用 无 序列 表 和 超 接 制作 导航 菜单 效果 图 





由 





垂直 一 级 菜单 实现 起 来 比较 容易 。 因 为 列表 项 默认 就 是 以 垂直 方式 显示 的 ， 所 以 不 再 
考虑 如 何 控制 列表 项 ， 整 体 控制 起 来 比较 容易 ， 采 用 表格 和 超 链接 、 无 序列 表 和 超 链 接 的 
方式 均 可 以 实现 ， 此 处 不 再 袭 述 。 
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10.2.2 ”二 级 水 平 导航 菜单 


商业 网 站 上 导航 菜单 一 般 有 多 种 表现 形式 ， 分 别 是 一 级 导航 菜单 、 二 级 导航 菜单 、 多 
种 形式 并 存 的 导航 菜单 。 例 如 “淘宝 论坛 ”(http://bbs.taobao.com/) 和 “京东 网 上 商场 ” 
(http://www.jd.com/) 主页 就 是 采用 多 种 形式 并 存 的 菜单 的 网 站 案例 ， 如 图 10-7 和 图 10-8 
所 示 。 多 级 导航 菜单 的 实现 技术 与 二 级 导航 菜单 类 似 。 
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-一 1. 下 拉 菜 单 


元 。 汪 本末 员 开 信用。 平价 全 MEAN RE 





2. 二 级 导航 菜单 
图 10-7 淘宝 论坛 首页 导航 菜单 效果 图 
Ee 1. 下 拉 菜 音 
节 礼 物 
2. 一 级 导航 菜单 





图 10-8 京东 网 上 商场 首页 导航 菜单 效果 图 


1. 下 拉 导 航 菜 单 

借助 于 JavaScript 设计 网 站 下 拉 菜 单 的 案例 比较 多 见 ， 而 采用 纯 CSS 设计 网 站 下 拉 菜 
单 需要 对 样式 进行 详细 定义 才能 实现 。 不 过 要 考虑 到 不 同 浏览 器 之 间 的 兼容 性 。 下 面 列举 
一 个 仅仅 采用 <ul></ul>、<li></li>、<a></a> 等 标记 和 CSS 样式 定义 来 实现 简单 的 二 级 下 拉 
菜单 的 设计 过 程 ， 页 面 效 果 如 图 10-9 所 示 。 


人 2 下拉 导航 荣 单 - Windows Internet 
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图 10-9 下 拉 导 航 菜单 效果 图 


具体 设计 步骤 如 下 : 
(1) 首先 编写 下 拉 菜单 的 HIML 代码 ， 链 接 外 部 样式 表 ， 代 码 如 下 所 示 。 


1 <!-- edu 10 2 6.html --> 
2 <!doctype html> 

3 <html lang="en"> 

4 <head> 














5 <meta charset="UTF-8"> 
6 <title> 下 拉 导 航 菜单 </title> 
7 <link rel="stylesheet" href="drapdownmenu.css" type="text/css"> 
8 </head> 
9 <body> 
0 <ul> 
于 <1i><a href="#"> 首 页 </a></1i> 
2 <1i><a href="#">jQuery 特 效 </a> 
3 <ul> 
4 <li><a >jQuery 图 片 特效 </a></1i> 
5 <li><a #">jQuery 导 航 特 效 </a></1i> 
6 <li><a #">jQuery 选 项 卡特 效 </a></1i> 
好 <li><a #">jQuery 文 字 特 效 </a></1i> 
8 </ul> 
9 </1i> 
20 <1i><a href="#">JavaScript 特 效 </a></1i> 
21 <1i><a href="#">Flash 特 效 </a> 
22 <ul> 
5 <1i><a href="#">Flash 图 片 特效 </a></1i> 
24 <li><a >Flash 导 航 特 效 </a></1i> 
25 <1i><a >Flash 选 项 卡特 效 </a></1i> 
26 <li><a #">Flash 文 字 特效 </a></1i> 
2 </ul> 
28 </1i> 
29 <1i><a href="#">div+css 教 程 </a></1i> 
30 <1i><a href="#">HTML5 教 程 </a></1i> 
31 </ul> 
32 </body> 
33 </html> 


在 不 设置 任何 CSS 类 的 情况 下 ， 下 拉 菜 单 的 页 面 效 果 如 图 10-10 所 示 。 








。 由 cai 考生 
。 HIML:3 考 生 


图 10-10 无 样式 的 下 拉 导 航 菜单 效果 图 
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(2) 逐步 设置 样式 ， 让 菜单 越 来 越美 。 

@ 定义 届 的 样式 ， 设 置 边 距 和 填充 均 为 Opx。 

ul {margin: 0px; padding: 0px;} /* 考 虑 到 不 同 浏览 器 兼容 性 */ 

@ 定义 列表 项 样式 ， 由 垂直 排列 改 为 水 平 排列 。 应 用 后 页 面 效 果 如 图 10-11 所 示 。 


ul li { height: 30px; width: 1l5px; list-style: none; float: left; 
display: inline; font: 0.9em Arial, Helvetica, sans-serif;} 


这 条 规则 定义 了 二 标记 为 浮动 、 行 内 显示 、 宽 度 、 高 度 、 字 体 等 样式 。 


2 下 拉 导 航 菜单 -Windows Internet Explorer 
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图 10-11 应 用 规则 后 的 下 拉 导 航 菜单 效果 图 


@ 定义 超 链 接 的 样式 ， 应 用 规则 后 的 页 面 效果 如 图 10-12 所 示 。 


ul lia { color: #FFF; width: 113px; margin: Opx; padding: Opx Opx Opx 8px; 
text-decoration: none; display: block; background: #808080; 
line-height: 29px; border-right: lpx solid #ccc; border-bottom: lpx solid #ccc;} 


这 条 规则 的 作用 就 是 加 上 背景 和 菜单 间 的 隔离 线 ， 把 默认 有 下 夯 线 蓝 色 的 文字 变 成 白 
色 无 下 画 线 。 
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图 10-12 ”应 用 规则 后 的 下 拉 导 航 菜单 效果 图 
@ 定义 嵌 套 列表 项 和 子 菜单 超 链接 的 规则 。 


ul li ul li { height:25px; } 
ul li ul li a {background: #666; line-height:24px;} /*#666 等 同 于 #666666*/ 


此 处 第 1 条 是 设置 子 菜单 的 列表 项 目 高 度 为 25px， 以 区 别 主 菜单 列表 项 ; 第 2 条 规则 


是 子 菜单 项 中 的 超 链 接 的 背景 改 为 #666， 并 将 行 高 调整 为 24px。 应 用 样式 后 的 页 面 效果 如 
图 10-13 所 示 。 
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图 10-13 ”应 用 规则 后 的 下 拉 导 航 菜单 效果 图 
@ 定义 鼠标 滑 过 某 个 菜单 项 时 的 样式 。 
ul li a:hover { background: #666; border-bottom:1px dashed #FF0000; } 
此 处 定义 了 鼠标 滑 过 时 背景 色 和 子 菜单 的 背景 色 一 样 ， 定 义 底 边 框 为 lpx、 点 划 线 、 
红色 ， 页 面 效果 如 图 10-14 所 示 。 
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图 10-14 应 用 规则 后 的 下 拉 导 航 菜单 效果 图 














@ 定义 子 菜单 项 初始 状态 为 隐藏 ， 页 面 效 果 如 图 10-15 所 示 。 
ul li ul { visibility: hidden; } /* 也 可 以 设置 display:none */ 


下 拉 导 航 菜单 - Windows Internet Explorer 
合 国 : 加 rmznrossweav6sRRRRuovi 富国 四 |[x] 图 
请 收 训 天 。 葬 下 拉 导 航 荣 单 














图 10-15 应 用 规则 后 的 下 拉 导 航 菜单 效果 图 


@ 定义 鼠标 滑 过 时 下 拉 子 菜单 显示 样式 ， 页 面 效果 如 图 10-16 所 示 。 


ul li:hover ul { visibility: visible; }  /* 也 可 以 设置 display:block */ 
ul li ul li a:hover { background: #333; } /*#333 等 同 于 #333333*/ 


/下 拉 导 航 莱 单 - Windows Internet Ezplorer 
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2. 横向 二 级 导航 菜单 

所 谓 横 向 二 级 导航 菜单 ， 就 是 一 层 主 菜单 是 水 平 排列 、 二 层 子 菜单 也 是 水 平 排列 ， 各 
占 一 行 ， 其 中 二 层 子 菜单 可 能 会 占 多 行 ， 取 决 于 子 菜单 的 数量 。 例 如 “携程 旅行 网 官网 ” 
Chttp:Wwww.ctrip.com/)， 如 图 10-17 所 示 。 


条 程 自行 隐 训 网 :酒店 预订 ,机 村 预订 可 移 ,关注 民 坟 ,二 管理 Windons Irternet Explor 


[和 


二 级 水 平 导航 菜单 


人 入住 日期 |2015-2-13 201502.14 
时 机 别 | 下 有 





图 10-17 ”携程 旅行 网 官网 首页 导航 菜单 效果 图 


采用 纯 CSS 打造 横向 二 级 导航 菜单 ， 需 要 对 HTML 中 的 div、ul、1i、a 等 标记 进行 样 
式 定义 , 并 应 用 样式 。 在 设计 下 拉 菜 单 的 基础 上 , 很 容易 实现 横向 二 级 导航 菜单 , 如 图 10-18 














所 示 。 
GO: ET 
hsm hi nd 
图 10-18 横向 二 级 导航 菜单 效果 图 
具体 设计 步骤 如 下 : 


(1) 设计 HTML 代码 ， 与 下 拉 菜单 基本 相似 ， 代 码 如 下 所 示 。 


和 <1-= edu 10 2 7.html -==> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 横向 二 级 导航 菜单 </title> 

<link rel="stylesheet” href="level2 menu.css" type="text/cas"> 
8 </head> 

9 <body> 

10 <div id="menu" class=""> 

11 <ul> 

于 <1i><a href="#"> 首 页 </a></1i> 

13 <1i><a href="#">jQuery 特 效 </a> 

14 <div id="submenu" class=""> 

15 <ul> 

16 <1i><a href="#">jQuery 图 片 特效 </a></1i> 


17 <1i><a href="#">jQuery 导 航 特效 </a></1i> 


18 <1i><a href="#">jQuery 选 项 卡特 效 </a></1i> 


19 <1i><a href="#">jQuery 文 字 特 效 </a></1i> 

20 </ul> 

2 </div> 

这 和 Rf 

有 和 <1i><a href="#">JavaScript 特 效 </a></1i> 

24 <1i><a href="#">Flash 特 效 </a> 

25 <div id="submenu" class=""> 

26 <ul> 

27 <1i><a href="#">Flash 图 片 特效 </a></1i> 

28 <1i><a href="#">Flash 导 航 特 效 </a></1i> 

29 <1i><a href="#">Flash 选 项 卡特 效 </a></1i> 

30 <1i><a href="#">Flash 文 字 特 效 </a></1i> 

31 </ul> 

32 </div> 

33 </1i> 

34 <1i><a href="#">divtcss 教 程 </a></1i> 

35 <1i><a href="#">HTML5 教 程 </a></1i> 

36 </ul> 

37 </div> 

38 </body> 

39 </html> 

与 下 拉 菜 单 的 不 同 之 处 在 于 二 级 导航 子 菜单 是 放 在 div 中 ，id 为 submenu， 需 要 定义 
子 菜 单 图 层 div 的 样式 。 


(2) 定义 HTML 中 相关 标记 的 样式 。 


1 /* 程序 名 称 : level2_menu.css 

2 ”作用 对 象 : edu_10_2_6.html*/ 

3 #menu{ /* 定义 外 层 图 层 样 式 */ 

4 padding-left: 100px; 

5 margin: 0 auto; 

6 text-align: center; 

7 width: 100%; 

8 height: 60px; 
background: #55AAEE; 
border: lpx solid #333333; 

} 

#menu ul{/* 考 虑 到 不 同 浏览 器 兼容 性 */ 
margin: Opx; 
padding: Opx; 

} 

#submenu{ /* 定 义 存 放 子 菜单 的 图 层 样式 */ 
width: 900px; /* 不 要 为 100% */ 
height: 28px; 
text-align: center; 


上 FRR 
ownammewmNbhee 


20 } 

21 #menu ul 1i { /* 定 义 主 菜单 样式 */ 

22 height: 30px; 

23 width: 115px; 

24 1list-style: none; /* 去 除 列表 项 符号 */ 


25 float: left; /* 列 表 项 向 左 浮动 */ 
26 display: inline;  /* 列 表 项 为 行内 显示 */ 第 


27 font: 0.9em Arial, Helvetica, sans-serif; 
28 text-align: center; 
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29 } 

30 ul li af /* 定 义 主 菜单 中 超 链接 样式 */ 
31 color: #FFF; 

32 width: 114px; 

33 margin: Opx; 

34 padding: 0px 0px Opx 8px; 

35 text-decoration: none; 

36 display: block; /* 超 链接 以 块 方式 显示 */ 
37 background: #55A0FF; 

38 line-height: 29px; 

39 border-bottom: lpx solid #ccc; 


41 ul 1i #submenu ul 1i { /* 定 义 子 菜单 中 列表 项 的 高 度 ， 与 主 菜单 不 同 */ 
42 height: 25px; 


44 ul 1i #submenu ul 1i a { /* 定 义 子 菜单 中 超 链接 的 样式 */ 
45 background: #55AAEE; 
46 line-height: 24px; 


48 ul 1i a:hover{ /* 定 义 主 菜单 鼠标 滑 过 时 的 样式 */ 
49 background: #666; 
50 border-bottom: lpx dashed #FF0000; 


52 ul 1i #submenu{ /* 定 义 子 菜单 初始 状态 为 不 显示 */ 
53 display: none;/*visibility: hidden;*/ 





55 #submenu ul 1i{  ”/* 定 义 子 菜单 中 列表 项 的 样式 */ 
56 height: 24px; 

57 width: 113px; 

58 list-style: none; 

59 float: left; 

60 display: inline; 

61 font: 0.8em Arial, Helvetica, sans-serif; 
62 text-align: center; 


64 ul 1i:hover #submenu{ /* 主 菜单 鼠标 滑 过 时 显示 子 菜单 */ 
65 display: block;/*visibility: visible;*/ 


67 ul 1i #submenu ul li a:hovert{ 


68 background: #333; /* 子 菜单 鼠标 滑 过 时 指定 新 的 背景 颜色 */ 


参照 下 拉 菜 单 中 CSS 规则 的 定义 ， 很 容易 写 出 横向 二 级 导航 菜单 的 样式 文件 。 目 前 商 
业 网 站 中 的 导航 菜单 大 多 数 是 采用 DIV+CSS+JavaScript 技 术 或 采用 DIV+CSS+jQuery 技术 
来 设计 响应 式 导 航 菜单 ， 设 计 效 果 令 人 兴奋 、 令 人 满意 。 





10.3 综合 实例 


以 “中 国 出 版 协会 ”Chttp:/wwwpac.org.cn/) 网 站 的 导航 菜单 为 例 ， 详 细 讲解 网 站 页 面 
构建 的 过 程 ， 效 果 如 图 10-19 所 示 。 

中 国 出 版 协会 网 站 中 二 级 导航 菜单 是 采用 DIV+CSS+jQuery 技术 实现 的 ， 此 处 改 用 
DIV+CSS 技术 来 实现 , 在 实现 过 程 中 将 所 有 超 链 接 的 href 属性 设置 为 “#”， 并 对 原 网 站 进 








行 简化 ， 只 设计 网 站 的 头 部 、 导 航 区 域 、 新 闻 图 像 显示 区 域 、 底 部 版 权 区 域 等 ， 省 略 了 其 
他 区 域 的 信息 的 设计 。 
1. 网 站 页 面 div 布局 设计 


1 <div class="body-top"> 

所 <div class="header"> 

3 <div class="1ogo"> 

4 <div id="nav wrap" > 

入 <div id="nav"> nav </div> 
6 </div> 

学 </div> 

8 </div> 

9 </div> 





10 <div class="changediv">changediv</div> 
11 <div class="footer">footer</div> 























.logo 
nav_wrap 
#nav 
首页 | 协会 共计 | 新 加 公告 | 什 疗 进 迁 | 政策 法 规 | 工作 而 摄 | 评 淆 考 功 | 全 曾 服 务 | 教育 语音 | 外 事 | 去 家 访谈 | 医 会 | 行业 研究 
地 会 前 介 。 太 事 忆 。 协会 重生 。 协会 钱 兰 。 绰 炽 机 的 。 历史 六 下 
| .changeDiv 
以 党 的 十 八大 和 十 八 届 三 中 、 四 中 全 会 精神 为 指导 
落实 中 国 出 版 年 会 和 中 国 版 协 六 届 五 次 常务 理事 会 议 部 署 
.footer 
关于 我 们 | 同宗 才 图 | 点 所 声明 | 人 才 扣 各 
备 壬 号 ; 训 KC? 备 05020579 叶 度 权 所 有 ; 中 国 出 所 办 会 技术 文 持 ; 北 吝 中 王女 六 化 村 洲 有 阳 公 司 
lea com 
图 10-19 中 国 出 版 协会 首页 二 级 导航 菜单 效果 图 
2. 导航 菜单 结构 设计 
1 <ul class="clearfix"> 
2 <1li><a href=""> 首 页 </a>1</1i> <!-- 一 级 导航 --> 
3 <li><span class="v"><a href="#"> 协 会 概况 </a> <!-- 一 级 导航 ”--> 
4 <div> 
5 <a href="#"> 协 会 简介 </a> 二 学 
6 <a href="#"> 大 事 记 </a> 一 -> 
吧 <a href="#"> 协 会 章程 </a> 一 -> 
8 <a href="#"> 协 会 领导 </a> 一 -> 
9 <a href="#"> 组 织 机 构 </a> 一 -> 
10 <a href="#"> 历 史 沿 革 </a> 一 -> 
1 </div> 
12 Ii> 
3 <1i><a href=""> 新 闻 公 告 </a>1</1i> <!-- 一 级 导航 --> 
14 有 
15 <ul> 
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3. 网 站 页 面 代码 设计 
1 <!-- edu 10 3 1.hmtl --> 


2 <!doctype html> 
3 <html lang="en"> 












4 <head> 
5 <meta charset="UTF-8"> 
6 <meta name="keywords" content=" 中 国 出 版 协会 "> 
时 <meta name="description" content=" 中 国 出 版 协会 "> 
8 <link rel="stylesheet" href="pac.css" type="text/css"> 
9 <title> 中 国 出 版 协会 简化 网 站 </title> 
10 </head> 
入 <body> 
32 <div class="body-top"> 
13 <div class="header"> 
14 <div class="1ogo"> 
415 <div id="nav wrap" > 
16 <div id="nav"> 
17 <ul class="clearfix"> 
18 <li><span class= 
19 <a href="#" target=" blank"> 首 页 </a> 
20 <span class="cut line">|</span></span> 
21 </1i> 
22 <li><span class="Vv"> 
23 <a href="#"> 协 会 概况 </a></span> 
24 <span class="cut line">|</span> 
25 <div class="kind menu" style="left: 40px"> 
26 <a href="#"> 协 会 简介 </a><span>1</span> 
27 <a href="#"> 大 事 记 </a><span>1</span> 
28 <a href="#"> 协 会 章程 </a><span>1</span> 
29 <a href="#"> 协 会 领导 </a><span>1</span> 
30 <a href="#"> 组 织 机 构 </a><span>1</span> 
31 <a href="#"> 历 史 沿 革 </a><span>1</span> 
32 </div> 
33 </1i> 
34 <li><span class="v"> 
35 <a href="#"> 新 闻 公 告 </a></span> 
36 <span class="cut line">|</span> 
937 <div class="kind menu" style="left:40px"> 
38 <a href="#"> 协 会 动态 </a><span>1</span> 
39 <a href="#"> 行 业 动 态 </a><span>1</span> 
40 </div> 
41 </1i> 
42 <li><span class="v"> 
43 <a href="#"> 领 导 讲话 </a><span class="cut line">| 
</span></span> 
44 </1i> 
45 <li><span class="v"> 
46 <a href="#"> 政 策 法 规 </a></span><span class="cut 
line">|</span> 
47 <div class="kind menu" style="left: 40px"> 
48 <a href="#"> 政 策 发 布 </a><span>1</span> 
49 <a href="#"> 法 律 法 规 </a><span>1</span> 
50 </div> 
1 </1i> 
与 和 <li><span class="Vv"> 


小 <a href="#"> 工 作 简报 </a></span><span class= 


"cut line">|</span> 
54 
5 
56 
5 了 
58 
"cut line">|</span> 
59 
60 
61 
G2 
63 
"cut line">|</span> 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
35 
76 
"cut line">|</span> 
77 


81 


86 
"cut line">|</span> 
87 
88 
89 
90 
91 
line">|</span> 
92 
93 
94 
95 
96 
a 
98 
99 
100 
101 
102 
103 


<div class="kind menu" style="left: 40px"> 
</div> 

</1i> 

<li><span class="v"> 
<a href="#"> 评 奖 表彰 </a></span><span class= 


<div class="kind menu" style="left: 40px"> 
</div> 
</1i> 
<li><span class= 
<a href="#"> 会 员 服务 </a></span><span class= 





<div class="kind menu" style="left: 40px"> 


<a #"> 会 员 单位 </a><span>1</span> 
<a #" > 会员 动态 </a><span>1</span> 
<a #"> 申 请 入 会 </a><span>1</span> 
<a #"> 会 员 变 更 </a><span>1</span> 
<a #"> 会 员 风采 </a><span>1</span> 





<a #"> 行 业 维权 </a><span>1</span> 
<a href="#"> 行 业 自律 </a><span>1</span> 
<a href="#"> 建 言 献 策 </a><span>1</span> 
</div> 
/li 
<li><span class="v"> 
<a href="#"> 教 育 培训 </a></span><span class= 


<div class="kind menu" style="left: 40px"> 
</div> 
</1i> 
<li><span class="v"> 
<a href="#"> 外 事 </a></span><span class="cut_ 


<div class="kind menu" style="left: 40px"> 
</div> 

{ll> 

<li><span class="v"> 
<a href="#"> 专 家 访谈 </a></span><span class= 


<div class="kind menu" style="left: 40px"> 
</div> 
</1i> 
<li><span class="v"> 
<a href="#"> 展 会 </a></span><span class="cut 


<div class="kind menu" style="left: 40px"> 
</div> = 
</1i> 
<li><span class="v"> 
<a href="#"> 行 业 研 究 </a></span> 
<div class="kind menu" style="left: 40px"> 
<a href="#"> 高 端 视点 </a><span>1</span> 
<a href="#"> 理 论 专题 </a><span>1</span> 
<a href="#"> 调 研 报告 </a><span>1</span> 
<a href="#"> 在 线 调研 </a><span>1</span> 
</div> 
</1i> 








DIV+CSS 页 夯 确 局 





Web 育 帝 开 阁 帮 大 一 TINMTI、CSS3、JavaScript ( 筑 3 族 ) 








104 < /ul> 

105 </div><!--nav--> 

106 </div><!--nav_wrap--> 

107 </div> 

108 </div> 

109 </div> 

110 <div class="changediv"> 

111 <a href="#"><img src="v9/20150213112820232.jpg" width="960" height= 
"198" alt=" 中 国 出 版 年 会 召开 ” /></a> 

4 </div> 

313 <div class="footer"> 

114 <div class="" style="padding-top:10px;margin-bottom:10px;" > 

15 <a href="#"> 关 于 我 们 </a> | 

16 <a href="#"> 网 站 地 图 </a> | 

了 <a href="#"> 版 权 声明 </a> | 

18 <a href="#"> 人 才 招 聘 </a> 

19 </div> 

20 <div> 

2 <span> 备 案 号 : 京 ICP 备 05020570 号 </span><span> 版 权 所 有 : 中 国 出 版 协会 
</span> 

22 <span> 技 术 支 持 : <a href="#"> 北 京 中 青 文 文化 传媒 有 限 公司 </a></span> 

23 </div> 

24 <div> 

125 <span> 办 公 地 址 : 北京 市 东城 区 美术 馆 东 街 22 号 </span> 

26 <span> 邮 编 ， 100010</span><span> 电 话 : 010-65246062</span> 

27 <span> 电 子 邮 箱 : cbanxiee163 .com</span> 

28 </div> 

29 </body> 

30 </html> 

上 述 代码 中 二 级 子 菜单 采用 类 名 为 kind_menu 的 div 作为 容器 ， 内 插入 若干 超 链接 作 
为 二 级 子 菜单 ， 如 代码 中 第 25 一 32 行 、 第 64 一 73 行 等 之 间 的 div 就 是 二 级 子 菜单 。 页 面 
装载 时 不 显示 子 菜单 ， 当 鼠标 滑 过 一 级 菜单 中 的 列表 项 时 , 通过 样式 定义 显示 二 级 子 菜单 。 





IE6 以 下 浏览 器 不 支持 ，Chrome、FireFox、IE7 以 上 浏览 器 均 支 持 。 


4. 对 象 的 显示 与 隐藏 CSS 规则 设计 

在 CSS 的 布局 中 实现 特定 对 象 显示 与 隐藏 方法 有 两 种 ， 分 别 介绍 如 下 。 
1) display 显示 属性 

设置 或 检索 对 象 是 否 显 示 以 及 如 何 显示 。 

(1) 基本 语法 。 


display:blocklnone1linline 


(2) 语法 说 明 。 

block: 用 该 值 为 对 象 之 后 添加 新 行 。 

none: 与 visibility 属性 的 hidden 值 不 同 ， 其 不 为 被 隐藏 的 对 象 保留 其 物理 空间 。 
inline: 用 该 值 将 从 对 象 中 删除 ， 以 内 联 方式 显示 对 象 。 

举例 如 下 : 


1 #divl{display:none;} /* 让 div1 初 始 装 载 时 不 显示 */ 
2 #nav a:hover #divl{ display:block;} /* 鼠标 滑 过 时 div1 显 示 */ 


2) visibility 可 视 属性 

设置 或 检索 是 否 显示 对 象 。 与 display 属性 不 同 , 此 属性 为 隐藏 的 对 象 保留 其 占据 的 物 
理 空 间 。 如 果 希 望 对 象 为 可 视 ， 其 父 对 象 也 必须 是 可 视 的 。 

(1) 基本 语法 。 


visibility : inheritlvisiblelcollapselhidden 


(2) 语法 说 明 。 

inherit: 继承 上 一 个 父 对 象 的 可 见 性 。 

visible: 对 象 可 视 。 

hidden: 对 象 隐藏 。 

collapse: 主要 用 来 隐藏 表格 的 行 或 列 。 隐 藏 的 行 或 列 能 够 被 其 他 内 容 使 用 。 对 于 表格 
外 的 其 他 对 象 ， 其 作用 等 同 于 hidden。 焉 5.5 尚 不 支持 此 属性 。 

举例 如 下 : 


img { visibility: hidden; float: right; }  /* 让 对 象 隐藏 */ 
img { visibility: visible; float: right; } /* 让 对 象 恢复 可 视 */ 


S， 定义 pac.css 文件 


/* 网 站 : 中 国 出 版 协会 简化 网 站 
样式 表 文件 名 : pac.css 
应 用 对 象 : edu_10 3 _1.hmt1 
*/ 
body{ color: #010101; background: #fff; 
margin-top: Opx; margin-left: Opx; margin-right: Opx;} 
body, html{ font: 12px/1.5 tahoma, arial, sans-serif;display: block;} 
.body-top{height: 297px;background: url("v9/bl.jpg");} 
.header, .header .logo{width: 960px;margin: 0 auto; 
10 height: 297px;background: url("v9/b2.jpg") no-repeat center;} 
11 /*New Nav Style*/ 
12 #nav ul{margin:0px;padding:0px;} 
13 #nav li{ text-align:center;font-size:14px;font-weight:700;} 
14 #nav wrap {width: 960px;overflow: hidden;padding-top: 223px;} 
15 #nav{height: 69px;width: 960px; margin: 0 auto;padding:0px Spx; 
16 position: relative;} 
17 #nav li {float: left;list-style: none;} 
18 #nav li .v a{padding: 0 4px;height: 39px;line-height: 33px; 
19 display: block;color: #0d2972;float: left;} 
20 #nav li .v a:hover{color: #d62e38;text-decoration: none;} 
21 #nav.kind menu{height:30px;width:880px;top:26px; left:70px; line-height: 30px; 
22 vertical-align: middle; position: absolute; padding-top: 1l8px; font- 
weight: normal; color: #152026; font-size: 12px; 
23 text-align: left; display:none; /* 初始 不 显示 */} 
24 #nav -kind menu a {color: #152026;text-align: center; 
25 padding: 0 1l0px; font-family: Arial, Helvetica, sans-serif;} 
26 #nav .kind menu a:hover {text-decoration: none;} 
27 #nav .kind menu span {font-size: 10px; color: #cecece; line-height: 30px;} 
28 .cut line{padding-top: 4px;display: inline-block;font-size: 14px;} 
29 /* 鼠标 滑 过 时 显示 二 级 菜单 */ 
30 #nav ul li:hover .kind menu{display:block;left:100px; /* 显示 子 菜单 */} 
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31 .changediv{text-align:center;} 
32 .footer{text-align:center;} 
33 img{border:0px;} 


上 述 代码 中 的 第 21~23 行 定义 二 级 子 菜单 的 显示 样式 。 第 30 行 定义 当 鼠 标 滑 过 时 子 
菜单 的 样式 ， 以 抉 方式 显示 子 菜单 。 


本 章 小 结 


本 章 主 要 分 析 了 常见 的 网 站 页 面 布 局 模式 ， 给 出 每 类 模式 的 DIV 结构 设计 和 CSS 文 
件 编写 方法 。 通 过 图 层 div 合理 地 和 嵌 套 帮助 初学 者 建立 页 面 布局 的 概念 ， 掌 握 常 用 页 面 布 
局 结构 编程 方法 。 学 会 运用 CSS 样式 文件 来 定义 特定 对 象 的 样式 ， 使 所 设计 的 网 站 页 面 能 
够 尽量 美观 、 漂 亮 ， 提 升 用 户 的 体验 。 在 进行 样式 定义 时 ， 最 好 能 够 学 会 使 用 浏览 器 兼容 
性 测试 工具 来 检查 自己 所 编写 的 CSS 规则 ， 实 现在 不 同 浏览 器 上 显示 相同 的 页 面 效果 。 





练习 与 实验 
练习 10 
1， 选择 题 
(1) 下 列 CSS 规则 中 能 够 让 图 层 div 不 显示 的 选项 是 (  )。 
A. div{display:block;} B. div{display:none;} 
C. div{display:inline;} D. div{display:hidden;} 
(2) 下 列 CSS 规则 中 能 够 让 列表 项 水 平 排列 的 选项 是 站 
A. li{float:left;} B. li{ffloat:none;} 
C. li{float:middle;} D. li{float:up;} 
(3) 下 列 CSS 规则 中 能 够 让 图 层 div 隐藏 的 选项 是 和 
A. divfvisibility:none:} B. div{ visibility: visible;} 
C. div{visibility:hidden;} D. divfvisibility:block:} 
(4) 下 列 CSS 规则 中 能 够 使 超 链 接 在 盘旋 时 产生 上 夯 线 效果 的 选项 是 je 








A. a:hover{text-decoration:none;} 

B. a:hovert{text-decoration:underline;} 

C. a:hover{text-decoration:line-through;} 

D. a:hover{text-decoration:overline;} 

(5) 下 列 CSS 规则 中 能 够 使 超 链接 在 盘旋 时 下 边框 为 2px、 实 线 、 红 色 效 果 的 选项 是 

《 )。 
ahover{border-bottom:2px solid #FF0000;text-decoration:none;} 
a:hover{border-top:2px solid #FF0000;text-decoration:none;} 
a:hover{border-bottom:2px dashed #FF0000;text-decoration:none;} 
a:hover{border-right:2px double #FF0000;text-decoration:none;} 


DopPp 


2. 简 答 题 
(1) 简 述 采用 DIV+CSS 技术 进行 页 面 布局 的 基本 步骤 。 
(2) 说 明 CSS 布局 属性 中 “display:block” 与 “visibility: visible” 的 区 别 。 


实验 10 


1. 运 用 


DIV+CSS 技术 实现 如 图 10-20 所 示 的 页 面 布 局 .分 别 编写 相应 的 exp_10_1.html 


和 CSS 外 部 样式 表 文 件 exgp_10_1.css。 


Copyrighes 2015-2020 nk 阴 委 开发 工作 齐 e All righra zeserved。 中 国芳 








图 10-20 ”Web 页 面 设计 实例 图 


2. 运用 DIV+CSS 完成 如 图 10-21 所 示 的 页 面 布 局 。 
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图 10-21 DIV+CSS 布局 实例 
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本 章 学 习 目标 


使 用 文字 、 段 落 、 图 像 和 列表 等 元 素 进行 网 页 设计 ， 已 经 能 够 设计 出 一 个 基本 的 网 页 ， 
但 页 面 的 信息 元 素 不 够 丰富 ， 特 别 是 有 些 关联 数据 、 同 类 数据 等 需要 集中 呈现 时 ， 仅 仅 使 
用 列表 、 段 落 等 标记 不 能 很 好 地 满足 页 面 设计 的 需要 ， 而 表格 是 网 页 设计 中 常用 的 一 种 用 
于 组 织 和 排版 同类 或 相关 数据 等 信息 的 最 好 的 集中 呈现 方式 。 通 过 表格 可 以 精确 地 控制 页 
面 元 素 在 网 页 中 的 位 置 。 所 以 掌握 表格 标记 及 属性 设置 方法 就 显得 十 分 重要 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 掌握 表格 的 标记 和 标记 属性 。 

。 掌握 表格 行 标记 的 属性 及 设置 方法 。 

。 掌握 表格 单元 格 的 跨行 与 跨 列 属性 的 设置 方法 ， 实 现 单 元 格 合并 。 

。 学 会 使 用 表格 和 表格 谈 套 方法 设计 简易 网 页 。 


11.1 表格 概述 


在 Web 网 页 上 如 何 将 大 量 相关 数据 或 同类 数据 组 织 起 来 并 呈现 给 网 络 访问 者 呢 ? 在 
HTML 中 可 以 使 用 表格 table 标记 将 一 组 相关 数据 直观 、 明 了 地 展现 给 网 络 访问 者 。 表 格 
以 简洁 明了 和 高 效 快捷 的 方式 将 图 片 、 文 本 、 数 据 和 表单 的 元 素 有 序 地 显示 在 页 面 上 ， 从 
而 可 以 设计 出 漂亮 的 页 面 。 

表格 在 网 页 设计 中 能 将 网 页 分 成 多 个 任意 的 矩形 区 域 。 定 义 一 个 表格 时 ， 使 用 成 对 
<table></table> 就 可 以 完成 ， 网 页 设计 人 员 可 以 将 任何 网 页 元 素 放 进 HTML 表格 的 单元 格 
中 。 定 义 表格 所 使 用 的 标记 如 表 11-1 所 示 。 


表 11-1 常用 表格 标记 及 说 明 表 


标 记 说 了 明 标 记 说 明 
<table></table> 表格 标记 <thead></thead> 定义 表格 的 表 头 


<caption></caption> 表格 标题 标记 定义 表格 的 主体 
> 表格 表 关 标记 定义 表格 的 页 


<tr></tr> 表格 的 行 标记 
<td></td> 表格 的 列 标 记 
表格 由 表 头 、 表 体 、 表 尾 三 部 分 组 成 。 表 头 由 若干 个 表格 标题 组 成 ， 表 体 由 若干 行 组 
成 ， 表 尾 由 文字 、 相 关 数 据 和 日 期 组 成 ， 标 明 表 的 设计 单位 、 设 计 人 和 日 期 等 信息 。 
【 例 11-1-1】 简 易学 生 信 息 表 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 11-1 所 示 。 
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<4== Sd 11 1 1-htwl 一 -> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 


<title> 表 格 的 定义 </title> 


<table border="1" width="300px" height="100px"> 


</head> 
<body> 
<tr> 
<th> 姓 名 </th> 
<th> 单 位 </th> 
<th> 学 号 </th> 
二 
<tr> 
<td> 王 小 品 </td> 
<td> 商 学 院 </td> 
<td>110204</td> 
</tr> 
<tr> 
<td> 李 白 </td> 
<td> 机 械 学 院 </td> 
<td>100244</td> 
</Er> 
</table> 
</body> 


</html> 

















| 把 名 | 
压 小 品 。 商学 院 
‖ 二 6 册 械 学 院 
图 11-1 


11.2 表格 标记 


在 HIML 中 ， 表 格 主要 由 五 个 标记 构成 : 


基本 语法 
<table> 
<caption> 表 格 标题 </caption> 
2 
<th></th> 
<th></th> 
<th></th> 
</tr> 
xt 
<td></td> 
<td></td> 
<td></td> 
</tr> 


事 格 的 定义 





表格 的 定义 


table、caption、tr、th、td 标记 。 





视频 讲解 


Web 育 弦 开交 老大 一 TINMTI，、CSS3、JavaScript ( 荔 了 猎 ) 





4 </table> 


语法 说 明 

table 标记 是 成 对 标记 ，<table> 表 示 表 格 开始 ，</table> 表 示 表 格 结束 。 

caption 标记 是 成 对 标记 ，<caption> 表 示 标 题 开 始 ，</caption> 表 示 标 题 结束 。 使 用 
caption 标记 可 以 给 表格 添加 标题 ， 该 标题 应 位 于 table 标记 与 tr 标记 之 间 的 任何 
位 置 。 

tr(Table Row) 标 记 是 成 对 标记 ，<tr> 表 示 行 开始 ，</tr> 表 示 行 结束 。 

th(Table Heading 表 头 ) 标 记 是 成 对 标记 ，<th> 表 示 表 头 开始 ，</th> 表 示 表 头 结束 。 

设计 表格 时 ， 表 头 常 常 作 为 表格 的 第 1 行 或 者 第 1 列 ， 用 来 对 表格 单元 格 的 内 容 进 
行 说 明 。 表 头 文字 内 容 一 般 居 中 、 加 粗 显 示 。 

td(Table Data) 标 记 是 成 对 标记 ， 定 义 单元 格 或 列 。 以 <td> 开 始 ， 以 </td> 结 束 。 表 头 
可 以 用 也 标记 定义 ， 也 可 以 用 td 标记 定义 ， 但 <td></td> 两 标记 之 间 的 内 容 不 自动 
居中 、 加 粗 。 


在 一 个 表格 中 ,可 以 插入 多 个 tt 标记 ,表示 多 行 , 一 组 <tr>...</tr> 标 记 表示 插入 一 行 。 
一 行 中 可 以 有 多 个 列 ， 列 也 称 为 单元 格 》 中 的 内 容 可 以 是 文字 、 数 据 、 图 像 、 超 链接 、 
表单 元 素 等 。 





例 11-2-1】 设 计 班级 课程 表 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 11-2 所 示 。 


1 <!--edu 11 2 1.html--> 
2 <!doctype html> ee 
3 <html lang="en"> 视频 讲解 








4 <head> 

EF <meta charset="UTF-8"> 

6 <title> 定 义 表格 </title> 

7 <style type="text/css"> 

8 td{text-align:center;} 

9 #bg{background:#EOEOE07} 

0 </style> 

1 </head> 

<body> 

3 <table width="700" height="150px" border="1"> 
4 <comment> 表 格 标题 </comment> 
5 <caption><strong>2012 软 件 工 程 班 课程 表 </strong></caption> 
6 <tr> 

<th> 节 次 </th> 

8 <th> 星 期 一 </th> 

9 <th> 星 期 二 </th> 

0 <th> 星 期 三 </th> 

LL <th> 星 期 四 </th> 

2 <th> 星 期 五 </th> 

3 长 多 

4 <tr id="bg"> 

5 <td> 第 1-2 节 </td> 

6 <tqd>Java 程 序 设计 </tq> 

7 <td>Web 前 端 开发 技术 </td> 
8 <td> 数 字 逻 辑 电路 </td> 

9 <td> 数 据 结 构 </td> 


0 <td> 体 育 </td> 





31 Ht 

32 <tbry 

33 <td> 第 3-4 节 </td> 
34 <td> 心 理 咨 询 </td> 
35 <td> 线 性 代数 </td> 
36 <tqd> 数 据 结构 </td> 
37 <td> 数 据 结构 </td> 
38 <td>Web 前 端 开 发 技术 </td> 
39 </tr> 

40 </table> 

41 </body> 

42 </html> 

3. 代码 解释 


代码 中 第 13 一 40 行 插入 一 个 3 行 6 列表 格 ， 其 中 第 15 行 定 义 表格 的 标题 ; 第 16 一 23 
行 定义 表 头 ， 表 头 的 内 容 居 中 加 粗 显示 ; 第 24~31 行 定义 表格 的 第 2 行 ， 第 32 一 39 行 定 
义 表 格 的 第 3 行 。 其 中 表格 第 2 行 应 用 #bg 样式 ， 加 上 背景 效果 。 


节 次 


[全 人 EEC 


2017 软 件 工程 班 课程 表 


第 1-2 节 。 Jan 程序 设计 。 Web 术 并 开发 技术 。 数字 远 妖 电 路 “数据 结构 


第 3. 仙 心理 咨询 乒 性 代数 


数据 结构 


雪 据 结构 Web 前端 开发 技术 





图 11-2 插入 表格 


11.3 表格 属性 设置 


表格 是 一 种 常用 的 页 面 布局 方法 ， 也 是 网 页 中 数据 分 析 的 最 好 展示 工具 之 
用 中 借助 于 表格 标记 和 标记 属性 可 以 完成 表格 的 装饰 和 美化 。 表 格 标记 的 属性 如 表 11-2 


-。 实 际 应 

















所 示 。 
表 11-2 表格 标记 的 属性 、 取 值 及 说 明 表 
属 性 值 描 述 
align leftlcenterlright 规定 表格 相对 周围 元 素 的 对 齐 方 式 
#1rggbb| colorname 和 埋 曙 章 
bgcolor rgb(r9%,29%.b%)| rgbGrgg bb) 规定 表格 的 背景 颜色 
border pixels 规定 表格 边框 的 宽度 
cellpadding pixels|% 规定 单元 边沿 与 其 内 容 之 间 的 空白 
cellspacing pixels|% 规定 单元 格 之 间 的 空白 
abovelbelowlhsides| vsides| i 4 从 半 ppA 忆 记 F 的 
frame Tsiadjboadalvoid 规定 外 侧 边框 的 哪个 部 分 是 可 见 的 
rules nonelall |rows|cols|groups 规定 内 侧 边 框 的 哪个 部 分 是 可 见 的 
height %lpixels 规定 表格 的 高 度 
width %lpixels 规定 表格 的 宽度 








Web 拭 六 开 阁 老 灰 一 一 PITMT5，、CSS3、JavaScript ( 席 3 族 ) 





11.3.1 表格 边框 属性 


设置 表格 的 边框 属性 可 以 改变 表格 的 外 观 。 边 框 属性 如 表 11-3 所 示 。 表格 中 的 属性 同 
样 适用 于 单元 格 。 





表 11-3 表格 边框 属性 说 明 表 
边框 属性 说 ” 明 边框 属性 
border | 表示 表格 边框 粗细 bordercolorlight 
表示 表格 边框 颜色 bordercolordark 
















说 了 明 
表示 表格 亮 边 框 颜色 
表示 表格 瞳 边 框 颜色 



















bordercolor 


1. 基本 语法 


<table border="" bordercolor="" bordercolorlight="" bordercolordark="">..</table> 

2. 语法 说 明 

。 border 属性 : 用 于 设置 边框 的 粗细 ， 单 位 是 像素 。 

。 bordercolor 属性 : 设置 表格 边框 的 颜色 ， 可 以 使 用 rgb 函数 、 十 六 进 制 数 和 颜色 英 
文 名 称 。 

。 bordercolorlight 属性 : 设置 表格 亮 边框 ， 对 表格 左上 边框 生效 。 

。 bordercolordark 属性 : 设置 表格 暗 边框 ， 对 表格 右 下 边框 生效 。 


11.3.2 表格 的 宽度 和 高 度 属性 


通过 width 属性 和 height 属性 可 以 设置 表格 的 宽度 和 高 度 。 
1. 基本 语法 


<table width="" height=""> . </table> 

2. 语法 说 明 

。 width: 单位 可 以 是 长 度 单位 或 百分比 ， 用 于 定义 表格 的 宽度 。 

。 height: 单位 可 以 是 长 度 单位 或 百分比 ， 用 于 定义 表格 的 高 度 。 

。 设置 表格 的 高 度 与 宽度 为 百分比 时 ， 表 格 会 跟随 浏览 器 窗口 的 改变 而 自动 调整 。 
11.3.3 表格 背景 颜色 与 背景 图 像 属 性 


设置 表格 的 bgcolor 属性 可 以 改变 表格 的 背景 颜色 ,设置 表格 的 background 属性 可 以 
为 表格 增添 背景 图 像 效 果 ， 使 表格 更 加 美观 。 
1. 基本 语法 


<table bgcolor=" " background="" .> .… </table> 


2. 语法 说 明 

。 bgcolor: 可 以 用 rgb 函数 、 十 六 进 制 、 英 文 颜色 名 称 来 设置 背景 颜色 。 

。 background: 设置 背景 图 像 ， 图 像 的 路 径 可 以 是 绝对 路 径 或 相对 路 径 。 

。 同时 设置 背景 颜色 和 背景 图 像 属 性 时 ， 背 景 图 像 会 部 分 或 完全 履 盖 背 景 颜色 。 
【 例 11-3-1】 设 置 表格 边框 属性 。 代 码 如 下 所 示 ， 页 面 效果 如 图 11-3 所 示 。 

















设置 表格 边框 、 背 景 、 范 围 








图 11-3 设置 表格 的 边框 属性 


1 < odu 31 3 .himl -> 
2 <!doctype html> 
3 <html lang="en"> 





border="15" bordercolor="#0000FF" bordercolorlight= "#ff0000" 


<table align="center" border="15px" width="700px" height="150px" 


bgcolor="#99cccc" > 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 设 置 表格 边框 、 背 景 、 范 围 </title> 
7 <style type="text/css"> 

8 h4{text-align:center;color:#0033cc;} 
9 td{text-align:center;} 

10 </style> 

3 </head> 

12 <body> 

3 <h4> 设 置 表格 边框 、 背 景 、 范 围 </h4> 

14 <table align="center" width="700px" height="150px" 
15 

bordercolordark="#6600ff" bgcolor="#99cccc" > 

16 <tEx> 

17 <th> 学 号 </th> 

18 <th> 姓 名 </th> 

19 <th> 所 在 院 系 </th> 
20 </tr> 
中 <tr> 
22 <td>110204</td> 
23 <td> 王 小 品 </td> 
24 <td> 商 学 院 </td> 
25 <FEr» 
26 <tr> 
27 <td>100244</td> 
28 <td> 李 白 </td> 
29 <td> 机 械 学 院 </td> 
30 </tr> 
人 </table> 
EY <hr> 

33 
34 background="backimagel .jpg" 
35 <tr> 
36 <th> 学 号 </th> 
37 <th> 姓 名 </th> 
38 <th> 所 在 院 系 </th> 
39 </tr> 

40 <tr> 

41 <td>110204</td> 
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42 <td> 王 小 品 </td> 
43 <td> 商 学 院 </td> 
44 /Er 

45 六 芷 于 区 

46 <td>100244</td> 
47 <td> 李 白 </td> 

48 <td> 机 械 学 院 </td> 
49 tr 

50 </table> 

51 </body> 

52 </html> 

3. 代码 解释 


代码 中 第 14 一 31 行 、 第 33 一 50 行 分 别 定义 两 个 3 行 3 列 的 表 。 其 中 第 14 行 定 义 表 
格 的 对 齐 方式 、 宽 度 和 高 度 ; 第 15 行 定 义 边 杠 粗细、 边框 颜色 、 亮 边框 颜色 、 暗 边框 颜 
色 、 背 景 颜 色 ; 第 34 行 同 时 设置 了 表格 的 背景 颜色 与 背景 图 像 ， 但 背景 图 像 覆 盖 了 背景 
11.3.4 表格 边框 样式 属性 

在 表格 中 设置 table 标记 中 的 frame 属性 可 以 改变 表格 边框 的 样式 ， 设 置 rules 属性 可 
以 改变 表格 内 部 边框 的 样式 。 

1. 基本 语法 


<table frame=" " rules="" .> … </table> 





2. 语法 说 明 
frame、rules 属性 值 及 说 明 如 表 11-4 所 示 。 
表 11-4 frame、rules 常见 属性 值 及 说 明 








frame 属性 值 说 明 说 明 
above 显示 上 边框 显示 所 有 内 部 边框 
below 显示 下 边框 不 显示 内 部 边框 
hsides 显示 上 下 边框 仅 显 示 行 边框 
Vsides 显示 左右 边框 仅 显示 列 边框 
lhs 显示 左边 框 显示 介 于 行列 间 边 框 
ths 显示 右边 框 

border 显示 上 下 左右 边框 

void 不 显示 边框 














表格 边 柜 样 式 定义 


院 系 名 称 
两 学院 
机 械 学 院 
外 语系 











11-4 设置 边框 样式 


1 == don 11 3 六 -有 bl =-> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> £ 时 

5 <meta charset="UTF-8"> 
i 视频 讲解 

6 <title> 设 置 边框 样式 </title> 

7 

8 





</head> 
<body> 
<table border="2" bordercolor="#00cccc" width="400px" height= "120px" 
frame="hsides" rules="all"> 


10 <caption><b> 表 格 边 框 样式 定义 </b></caption> 
11 <tr> 

12 <th> 姓 名 </th> 

和 <th> 院 系 名 称 </th> 
14 <th> 班 级 </th> 

15 </tr> 

16 <tr> 

17 <td> 王 小 品 </td> 
18 <td> 商 学 院 </td> 

了 8 <td>110204</td> 
20 </tr> 

21 <tr> 

2 <td> 李 白 </td> 

23 <td> 机 械 学 院 </td> 
24 <td>100244</td> 
25 </tr> 

26 <tr> 

2 <td> 林 之 </td> 

28 <td> 外 语系 </td> 
29 <td>090101</td> 
30 </tr> 

31 </table> 

32 </body> 

33 </html> 

3， 代码 解释 


代码 中 第 9 行 设置 表格 的 边框 样式 属性 ， 设 置 frame 属性 值 为 hsides， 只 显示 表格 上 
下 边框 ， 不 显示 左右 边框 。 设 置 rules 属性 值 为 ll， 显示 表格 内 部 的 所 有 边框 。 
11.3.5 表格 单元 格 间距 、 单 元 格 边 距 属性 

设置 表格 的 cellspacing 属性 可 以 改变 表格 单元 格 之 问 的 间隔 ， 使 网 页 中 的 表格 内 容 稍 
微 松散 一 些 。 设 置 表格 的 cellpadding 属性 可 以 增加 表格 的 单元 格 的 内 容 与 内 部 边框 之 间 的 
距离 。 

1. 基本 语法 

<table cellspacing="" cellpadding="" > . </table> 

2. 语法 说 明 

。 cellspacing: 值 的 单位 为 像素 或 百分比 ， 默 认 值 为 2px。 


。 cellpadding: 值 的 单位 为 像素 或 百分比 。 第 
【 例 11-3-3】 设 置 表格 的 单元 格 间距 和 边 距 。 代 码 如 下 所 示 ， 页 面 效果 如 图 11-5 所 示 。 | 11 
章 
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图 11-5 设置 单元 格 间距 


LL <= Gdu 11 3 3.html -=> 
2 <!doctype html> 
3 <html lang="en"> 

<head> 





i 
国内 





4 
5 <meta charset="UTF-8"> 
6 <title> 设 置 单元 格 间距 和 边 距 </title> 视频 讲解 
了 <style type="text/css"> 
8 strong{background:#ccffcc;} 
9 td{background:#99ccff;} 
0 </style> 
1 </head> 
2 <body> 
3 <b> 设 置 单 元 格 间 距 和 边 距 </b> 
14 <table width="500" border="4" cellspacing="50px" cellpadding="50px" 
bgcolor="#9966ff"> 
5 <tr> 
6 <td><strong> 高 等 数学 </strong></td> 
<td><strong> 大 学 英语 </strong></td> 
8 Er 
9 </table> 
20 </body> 
21 </html> 
3. 代码 解释 


代码 中 第 8 行 定义 strong 标记 样式 ， 作 用 是 设置 单元 内 容 的 背景 颜色 ; 第 9 行 定义 单 
元 格 的 背景 颜色 ， 第 14 行 设置 了 单元 格 的 间距 50px、 单 元 格 边 距 为 50px。 


11.3.6 表格 水 平 对 齐 属性 


通过 表格 标记 的 align 属性 可 以 设 定 表格 在 水 平方 向 上 的 对 齐 方式 , 分 别 有 居 左 、 居 中 、 居 
右 三 种 。 
1. 基本 语法 


<table align="left|center|lright"> .</table> 


2. 语法 说 明 
align 属性 的 取 值 可 以 为 left( 默 认 居 左 )、center( 居 中 ) 和 right( 居 右 )。 


【 例 11.3-4] 设置 表格 的 水 平 对 齐 属性 。 代码 如 下 所 示 , 页 面 效果 如 图 11-6 。 W833 
所 示 。 视频 讲解 





th il 3 tnl -> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

] <meta charset="UTF-8"> 

6 <title> 设 置 表格 水 平 对 齐 方 式 </title> 
宇 <style type="text/css"> 

8 div{width:100%;height:100px;} 


9 </style> 
10 </head> 
dy <body> 
12 <div id="" class=""> 
i3 <table align="left" border="2"> 
14 <caption> 学 生 信息 表 ( 左 对 齐 ) </caption> 
15 EE 
16 <td> 王 小 品 </td> 
17 <td> 商 学 院 </td> 
18 <td>110204</td> 
19 </tr> 
20 <tr> 
2 <td> 李 白 </td> 
22 <td> 机 械 学 院 </td> 
23 <td>100244</td> 
24 </tr> 
25 </table> 
26 </div> 
27 <div id="" class=""> 
28 <table align="center" border="2"> 
29 <caption> 学 生 信 息 表 (居中 对 齐 ) </caption> 
30 <tr> 
31 <td> 王 小 品 </td> 
32 <td> 商 学 院 </td> 
33 <td>110204</td> 
34 </tr> 
35 <tr> 
36 <td> 李 白 </td> 
37 <td> 机 械 学 院 </td> 
38 <td>100244</td> 
39 </tr> 
40 </table> 
41 </div> 
42 </body> 
43 </html> 


学 生 信息 表 ( 左 对 齐 ) 
压 小 品 商 学 院 “|110204 


床 白 ” 怖 械 学 院 


学 生 信息 表 (区 中 对 齐 ) 


工 小 品 山 学院 |110204 
榨 白 “ 汰 械 学 院 |100244 


图 11-6 设置 表格 对 齐 方式 





3. 代码 解释 
代码 中 通过 两 个 图 层 div 设置 两 种 表格 水 平 对 齐 方式 。 第 12 一 26 行 div 中 设置 了 表格 
左 对 齐 ; 第 27 一 41 行 div 中 设置 了 表格 居中 对 齐 。 
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11.4 设置 表格 行 的 属性 
表格 行 tt 标记 的 属性 用 于 设置 表格 某 一 行 的 样式 ， 其 属性 设置 如 表 11-5 所 示 。 
表 11-5 行 tr 标 记 的 属性 表 




















说 ” 明 属 性 说 了 明 
align 行内 容 水 平 对 齐 bordercolor 行 的 边框 颜色 
valign 行内 容 垂 直 对 齐 bordercolorlight 行 的 亮 边框 颜色 








bgcolor 行 的 背景 颜色 bordercolordark 行 的 暗 边框 颜色 





通过 tr 标记 的 align 属性 可 以 设置 行内 容 的 水 平 对 齐 方式 。 水 平 对 齐 方式 有 居 左 对 齐 、 
居中 对 齐 和 居 右 对 齐 。 通 过 tr 标记 的 valign 属性 可 以 设置 行内 容 的 垂直 对 齐 方式 。 垂 直 对 
齐 方式 有 顶部 对 齐 、 居 中 对 齐 和 底部 对 齐 。 

1. 基本 语法 


1 <table align="center" > 

2 <tr align="left | center | right" valign="top | middle | bottom"> 
3 <td>... </td> 

4 基 二 刘 

与 </Er> 

6 PE 

7 </table> 


2. 语法 说 阴 

left 表示 设置 行内 容 居 左 对 齐 ; center 表示 设置 行内 容 居 中 对 齐 ; right 表示 设置 行内 容 
居 右 对 齐 。top 表示 设置 行内 容 项 部 对 齐 ; middle 表示 设置 行内 容 居 中 对 齐 ; bottom 表示 
设置 行内 容 底 部 对 齐 。 其 中 行 垂直 居中 对 齐 属性 值 与 行 水 平 居 中 对 齐 属性 值 不 同 。 

【 例 11-4-1】 设 置 表格 行内 容 对 齐 属性 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 11-7 所 示 。 








SO rwaw B Slix 
六 必 环 天 。 | 天 商行 内 容 和 方式 





学 生 信息 表 (设置 表 行内 容 对 齐 方式 ) 





a 左 、 顶 部 对 齐 


商学 院 





























水 平 .垂直 


居中 对 齐 右 、 底 部 对 齐 






























































图 11-7 设置 行内 容 水 平 对 齐 


<!== edu 11 4 1.html ==> 
<!doctype html> 
<html lang="en"> 

<head> 可 本 
<meta charset="UTF-8"> 视频 讲解 





an 心 wN 


6 <title> 设 置 行内 容 对 齐 方式 </title> 

胖 <style type="text/css"> 

8 td{background:#ccffcc;} 

9 </style> 

10 </head> 

11 <body> 

2 <table border="1" width="450px" height="240px" align="center" bordercolor= 
"#6600f£f" 

13 <caption><b> 学 生 信息 表 (设置 表 行内 容 对 齐 方 式 ) </b></caption> 

14 <tE > 

15 <th> 姓 名 </th> 

16 <th> 院 系 名 称 </th> 

<th> 班 级 </th> 

18 </tr> 

19 <tr align="left" valign="top"> 

20 <td> 王 小 品 </td> 

21 <td> 商 学 院 </td> 

22 <td>110204</td> 

23 </tr> 

24 <tr align="center" valign="middle" > 

25 <td> 李 白 </td> 

26 <td> 机 械 学 院 </td> 

27 <td>100244</td> 

28 <tr align="right" valign="bottom"> 

2 <td> 林 之 </td> 

30 <td> 外 语系 </td> 

31 <td>090101</td> 

32 </tr> 

33 </table> 

34 </body> 

35 </html> 

3。 代码 解释 


代码 中 第 8 行 设置 单元 格 td 标记 的 背景 颜色 ; 第 12 行 定义 表格 ; 第 19 行 设置 表格 行 


内 容 对 齐 方式 为 水 平 居 左 、 垂直 居 项 ， 第 24 行 设置 行内 容 对 齐 方式 为 水 平 、 垂 直 均 居 


第 28 行 设置 行内 容 对 齐 方式 为 水 平 居 右 、 垂 直 居 底 。 


表格 列 标记 td 的 属性 可 以 设置 表格 单元 格 的 旱 


11.5 ”设置 单元 格 的 属性 


单元 格 的 颜色 、 边 框 和 对 齐 属性 与 行 tt 标记 一 样 。 


属 性 值 









表 11-6 单元 格 td 标记 的 属性 表 
i 属 性 


i 


显示 风格 。 常 用 的 属性 如 表 11-6 所 示 。 




















align | 单元 格 内 容 水 平 对 齐 bordercolorlight | 单元 格 的 亮 边框 颜色 
valign | 单元 格 内 容 垂直 对 齐 bordercolordark | 单元 格 的 暗 边框 颜色 
bgcolor 单元 格 的 背景 颜色 TOWspan 单元 格 跨行 







bordercolor 



















单元 格 背景 图 像 


单元 格 的 边框 颜色 





单元 格 跨 列 
单元 格 宽度 











单元 格 高 度 





甘 珍 


十 三 溃 
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11.5.1 表格 单元 格 路 行 属性 

使 用 单元 格 td 标记 的 rowspan 属性 可 以 设置 单元 格 跨行 合并 。 

1. 基本 语法 

<td rowspan=" 行 数 ">...</td> 

2. 语法 说 明 

rowspan 属性 可 以 设置 单元 格 跨行 。 通 过 rowspan="n" (n 是 正 整数 )， 可 以 设置 某 一 单 
元 格 跨 n 行 ， 当 前 行 下 的 mn-l 行内 的 单元 格 数量 都 需要 减少 一 个 ， 即 少 定义 一 个 td 标记 。 
11.5.2 表格 单元 格 跨 列 属性 

使 用 单元 格 td 标记 的 colspan 属性 可 以 设置 单元 格 跨 列 合 

1. 基本 语法 

<td colspan=" 列 数 ">. . .</td> 

2. 语法 说 明 

colspan 属性 可 以 设置 单元 格 跨 列 。 通 过 colspan="n" (n 是 正 整数 )， 可 以 设置 某 一 单 
元 格 跨 n 列 ， 当 前 行内 的 单元 格 数量 需要 减少 n-1 个 ， 即 删除 n-1 个 td 标记 。 

【 例 11-$-1】 设置 表格 单元 格 合并 。 代 码 如 下 所 示 ， 页 面 效果 如 图 11-8 局 






所 示 。 
1 <!-- edu 11 5 1.html --> 回 
2 <!doctype html> 视频 讲解 
3 <html lang="en"> 
4 <head> 
和 <meta charset="UTF-8"> 
6 <title> 设 置 单元 格 跨 列 、 跨 行 属性 </title> 
7 </head> 
8 <body> 
9 <h3 align="center"> 设 置 单元 格 跨 列 、 跨 行 属性 </h3> 
10 <table border="1" width="500px" align="center" bordercolor="#3366ff"> 
11 <caption> 云 计算 与 物 联网 会 议 日 程 安排 表 </caption> 
3 <tr align="center"> 
人 <td colspan="2"> 上 午 </td> 
14 <td colspan="2"> 下 午 </td> 
15 </tr> 
16 <tr > 
17 <td>8:00-10:00</td> 
18 <td>10:10-12:00 </td> 
19 <td>14:00-16:00</td> 
20 <td>16:10-18:00</td> 
21 </tr 
22 <tr align="center"> 
23 <td rowspan="2"> 领 导 讲话 </td> 
24 <td> 大 会 主题 报告 </td> 
25 <td> 分 会 专题 报告 </td> 
26 <td rowspan="2"> 总 结 报告 </td> 
27 </tr> 
28 <tr align="center"> 


29 <td> 专 家 报告 </td> 


30 <td> 分 组 讨论 </td> 


3 </tr> 

32 <tr align="center"> 

33 <td colspan="4"> 全 天 参观 考察 无 锡 国家 物 联 网 中 心 </td> 
34 /ELS 

5 </table> 

36 </body> 

37 </html> 


设 奸 单元 格 跨 列 、 跨 行 属性 
去 寺 关 怕 扣 同人 议程 雪 和 














es : rr | 


FE 二 3 | 


+ 











图 11-8 设置 单元 格 合 并 


3， 代码 解释 

代码 中 第 10 行 设置 表格 宽度 、 高 度 、 居 中 对 齐 方式 、 边 框 颜色 等 。 第 13 行 和 第 14 
行 设置 单元 格 跨 2 列 合并 ; 第 23 行 和 第 26 行 设置 单元 格 跨 2 行 合并 ; 第 33 行 设置 单元 格 
跨 4 列 合并 。 


11.6 表格 嵌 套 


表格 嵌 套 是 一 种 常用 的 页 面 布局 方式 。 利 用 表格 嵌 套 可 以 设计 比较 复杂 且 美 观 的 页 面 
效果 。 通 常情 况 下 ， 使 用 表格 嵌 套 时 ， 表 格 不 宜 过 多 使 用 ， 否 则 会 降低 网 站 访问 速度 。 表 
格 嵌 套 一 般 采 用 在 单元 格 内 和 嵌 套 表格 。 


1. 基本 语法 
1 <table> 
2 <Lr> 
3 <td> <!-- “单元 格 内 嵌 套 表格 -- > 
4 <table> 
» EL 
6 <td>. . .</td> 
时 二 二 
8 </tr> 
9 Er 
10 <Ed>. 0 .</td> 
11 gi 
12 </tr> 
EE </table> 
14 </td> 
15 <td>s -<7ta> 
16 De 
Ey! </tr> 
18 
19 </Eable> 
语法 说 明 
第 4 一 13 行为 在 第 1 个 表格 的 单元 格 内 嵌 套 一 个 表格 。 后 
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【 例 11-6-1】 设 置 嵌 套 表格 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 11-9 所 示 。 


了 二 edo 11 6 1.html 一 -> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 表 格 霸 套 </title> 

7 <style type="text/css"> 

8 ul{list-style-type:none;} 

9 li{width:80px;background:#00ccff;} 
10 p{text-indent:2em;font-size:16px;} 
11 </style> 


12 </head> 
13 <body> 





14 <h4 align="center"> 表 格 柑 套 </h4> 

15 <table width="660px" border="1" align="center" bordercolor="#3333ff"> 
16 <tr> 

17 <td width="170px">&nbsp;</td> 

18 <td width="360px" rowspan="3"><p> 地 铁 4 号 线 横 穿 南京 ， 从 河西 到 


仙 林 ， 起 点 龙 江 站 。 根 据 施 工 计划 ， 龙 江 片 区 要 掏 一 个 深 达 20 多 米 、 长 520 米 的 地 铁 枢 纽 站 。 目 前 ， 车 
站 已 经 完成 70&% 的 体 量 ， 剩 余 的 30$， 将 是 建设 难度 最 大 的 部 分 。 昨 天 ， 地 铁 施工 方 特意 “打招呼 ”: 为 
了 安全 ， 下 月 起 将 加 大 围 挡 范围 ， 可 能 影响 到 部 分 商户 经 营 及 市 民 的 出 行 ， 至 少 要 3 个 月 。 据 介绍 ，4 号 
线 计划 明年 底 通车 。</P></td> 


19 <td width="120"> 新 闻 链 接 </td> 

20 </tr> 

21 <tr> 

22 <td> 

23 <table width="100%" border="1" bordercolor="#33ff99"> 
24 <tr> 

25 <td> 科 技 </td> 

26 </tr> 

<tr> 

28 <td> 财 经 </td> 

29 </tr> 

30 <tr> 

31 <td> 探 索 </td> 

32 </tr> 

33 </table> 

34 </td> 

35 <td rowspan="2"> 

36 <ul> 

3 <1i><a href="http://www.baidu.com"> 百 度 </a></1i> 
38 <1i><a href="http://www.163.com"> 网 易 </a></1i> 
39 <1i><a href="http://www.sina.com"> 新 浪 </a></1i> 
40 <li><a href="http://www.sohu.com"> 搜 狐 </a></1i> 
41 </ul> 

42 </td> 

43 <A ER>. 

44 <tr> 

45 <td>gnbsp; </td> 

46 </tr> 

47 </table> 

48 </body> 


49 </html> 





线 横 穿 南京 ， 从 河西 到 仙 林 ， 起 点 龙 | 新 交尾 


好 铁 4 号 
根据 施工 计划 . 2 20 多 | 


8 
区 全 相交 和 可 | 六 






































机 仙人， 至 少 要 3 个 月 , 据 介 绍 ，4 号 线 计划 | 
| 明年 底 通 和 














3. 代码 解释 


代码 中 第 15 一 47 行 定 义 了 一 个 3 行 3 列 的 表格 ; 第 23 一 33 行 定 义 一 个 3 行 1 列 的 表 
格 ， 藤 套 在 第 1 个 表 的 第 2 行 第 1 列 中 。 第 18 行 设 置 单元 格 跨 3 行 ， 第 35 行 设 置 单元 格 


跨 2 行 。 


以 “医疗 机 械 公 司 ” 网 站 为 例 ， 利 用 表格 进行 
记 及 标记 属性 的 设置 来 美化 表格 ， 设 计 效 果 如 图 11-10 所 示 。 


医疗 器 材 


山 叶 全 桥 贡 司 市 本 四 


本 其 兰 则 生 扣 如 | 


1. 首页 页 面 表格 布局 


采用 5 行 2 列表 格 进行 





图 11-9 表格 嵌 套 


11.7 综合 实例 


关于 我 们 





放 现 在 的 位 置 。 首页 》 关 于 我 们 公司 简介 
四 7 各 外 公司 ( 共 名 为 医 六 车 加 六 ， 是 一家 专 弟 研制 、 生 产 各 类 区 用 论断 
法 人 外交 企业 在 国内 医疗 基 本 用 全 


00k 人 、 中、 小 天 列 六 品 ,所 多 产量 SO 《 豆 ) 


3 这 年末 ， 本 企业 折 住 发展 机 遇 ， 控 拓 、 发 所 企业 优势 ,加强 企 业内 部 各 种 要 
A 通过 和 外 痛经 、 FR 
作 。 合 企业 市 志 汪 争 衣 力 不 断 增 旺 。 目前 、 服 务 同 点 及 代理 机 构 多 个 


公司 在 全 国 zx 多 个 省 市 让 ; 
,产品 博美、 中 东 ， ee [ re a TT 
后 务 。 公司 以 专任 、 严 设备、 优 所 6 服务， 着力 林 和 久 和 :医疗 设备 界 





用 医 六 配件 和 专用 设 首 及 全 的 入 | 
的 吕 放 产品 
和 和 和 生产 类 和 中 公司 于 90" 年 新 术 人 人生 基 并 保护， 天 了 区 人 个 业 ， 庆 化， 
会 信用; 。 自 1998 年 6 月 瓜 ， 公 司 先后 过 了 TS0gh01 、ISi3485 、 CCC Ce 和 系列 于 质 旺 休 系 认证 如 产品 认 
er i 
“这 交 生 这、 凌 玉 无 止境 ”+ 公司 符 一 如 入 的 避 铺 于 省， 开拓 闻 新 ， 为 医疗 了 生 事 二 , 
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图 11-10 医疗 机 械 公司 网 站 首页 


公司 网 站 首页 的 布局 设计 ， 使 用 表格 标 


页 面 布 局 ， 在 表格 布局 中 使 用 单元 格 跨行 、 跨 列 合 并 以 及 单元 
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格 嵌 套 表格 等 方法 完成 页 面 布局 设计 ， 其 效果 如 图 11-11 所 示 。 





图 11-11 网 站 首页 表格 布局 图 


2. 网 站 首页 HTML 代码 设计 


1 < Gdn th 7 25html =~> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <meta name="Description" content=" 医 疗 机 械 产品 "> 
了 <title> 医 疗 机 械 公司 网 站 </title> 

8 <link rel="stylesheet" href="edu 11 7 1.css" type="text/css"> 
9 </head> 

10 <body> 

11 <table id="tablel" align="center"> 

12 <tr > 

13 <td colspan=2> 

14 <div id="1ogo"> 

15 <div id="floatl"> 

16 <img src="logo.png" alt="" border="0px"/> 
17 </div> 

18 <div id="floatr"> 

19 <a href='#' > 设 为 首页 </a> 

20 <a href='#' > 收藏 本 站 </a> 

2 </div> 

22 </div> 

23 </td> 

24 </tr> 

人 5 <tr id="nav"> 

26 <td colspan="2"> 

27 <table id="table2"> 


28 <tr> 

29 <td><a href="#"> 首 页 </a></td> 

30 <td><a href="#"> 关 于 我 们 </a></td> 
31 <td><a href="#"> 新 闻 资讯 </a></td> 
32 <td><a href="#"> 产 品 展示 </a></td> 
33 <td><a href="#"> 招 贤 纳 士 </a></td> 
34 <td><a href="#"> 联 系 我 们 </a></td> 
35 /tr> 

36 </table> 

37 </td> 

38 二 ET 


39 <tr> 


40 <td colspan=2><img src="yiliao big.jpg" alt=""></td> 


41 /tr 

42 <try 

43 <td id="td left"> 

44 <dl> 

45 <dt><strong> 关 于 我 们 </strong></dt> 

46 <dd><a href="#"> 公 司 简介 </a></dd> 

47 <dd><a href="#"> 公 司 历史 </a></dd> 

48 <dd><a href="#"> 公 司 宗旨 </a></dd> 

49 <dd><a href="#"> 在 线 留言 </a></dd> 

50 <dd><a href="#"> 联 系 我 们 </a></dd> 

51 </dl> 

52 </td> 

53 <td rowspan="2" id="td right"> 

54 <p id="bt1"><strong> 您 现在 的 位 置 : </strong> 首页 > 关于 我 们 > 
公司 简介 </p> 

55 <div idq="div1"> 

56 <a href="#" title=""> 

每 站 <img src="qiyejianjie small.jpg" style="width: 250px; 


height: 135px; margin: 10px;y float: left;border:0px;" alt="" /></a><span 
style="font-size:12px; "> 医疗 器 械 公 司 ( 前 名 为 医疗 器 械 厂 ) ， 是 一 家 专业 研制 、 生 产 各 类 医用 
诊断 x 射线 机 和 各 种 手术 床 的 大 中 型 国有 法 人 独资 企业 。 在 国内 医疗 器 械 放射 影像 行业 中 具有 很 高 的 地 位 
和 影响 。 本 企业 始 建 于 1946 年 ， 具 有 60 余 年 悠久 历史 ， 是 国内 大 型 医疗 设备 研发 生产 基地 。 历 年 来 ， 
公司 先后 研发 生产 的 各 类 医院 设备 涉及 医疗 器 械 各 个 领域 。 目 前 ， 公 司 主导 产品 smdash;sgmdash; 医 用 
诊断 x 射线 机 的 生产 ， 属 国内 最 早 ， 产 品 范围 覆盖 5mAgmdash; 800mA 大 、 中 、 小 型 系列 产品 ， 每 年 各 类 
Xx 射线 机 gnbsp; 产量 达 2500 台 ( 套 ) 。 </span> 
58 


</div> 
59 <div>gnbsp;</div> 
60 <div id="div1"> 
61 <span style="font-size:12px;"> 近 年来， 本 企业 抓 住 发 展 机 遇 ， 


挖掘 、 发 挥 企业 优势 ， 加 强 企业 内 部 各 种 要 素 的 整合 ， 优 化 资源 配置 ， 通 过 产 、 学 、 研 的 合作 ， 通 过 和 
国外 厂商 经 、 技 、 贸 的 合作 ， 使 企业 市 场 竞争 能 力 不 断 增强 。 目前 ， 公 司 在 全 国 30 多 个 省 市 自治 区 设 有 
营销 、 服 务 网 点 及 代理 机 构 70 多 个 ， 履 盖 全 国 及 世界 各 个 国家 和 地 区 ， 产 品 远 销 欧美 、 中 东 、 东 南亚 等 
国家 地 区 。 同 时 ， 公 司 为 国内 外 客户 及 部 队 用 户 提供 开发 、 生 产 服务 ， 为 用 户 提供 多 种 通用 医疗 配件 和 
专用 设备 及 满意 的 售后 服务 。 公司 以 专业 的 队伍 、 严 说 的 管理 、 卓 越 的 设备 、 优 质 的 服务 ， 着 力 打造 放 
射 医疗 设备 界 的 品牌 产品 。 





62 </span> 

63 </div> 

64 <div> &nbsp;</div> 

65 <div id="div1"> 

66 <span style="font-size:12px;"> 在 60 多 年 的 生产 经 营 中 ， 公 司 


于 1993 年 荣获 高 新 技术 企业 的 荣誉 ， 并 一 直 保 持 至 今 ， 荣 获 了 首 批 科技 小 巨人 企业 ， 诚 信 企 业 ，A 类 财 
务 会 计 信 用 单位 等 荣誉 。 自 1998 年 6 月 始 ， 公 司 先后 通过 了 ISO9001、ISO13485、CCC、 SFDA、 CE 
等 系列 国际 质量 体系 认证 和 产品 认证 ， 多 项 产品 列 入 中 国医 疗 装备 协会 推荐 产品 ，《 医 用 诊断 X 射 线 》 机 
被 推荐 为 上 海 名 牌 产 品 ， 本 品牌 被 推荐 为 装备 制造 业 与 高 新 技术 产业 自主 创新 品牌 享有 极 高 的 声誉 和 
良好 的 品牌 效应 。 医疗 器 械 公司 坚持 用 企业 文化 提升 企业 核心 竞争 力 ， 使 企业 在 发 展 中 树立 起 良好 的 社 
会 形象 。&1ldquo; 行 远 必 自 偿 、 追 求 无 止境 erdquo; 。 公 司 将 一 如 既往 地 励精图治 ， 开 拓 创 新 ， 为 医疗 
卫生 事业 ， 做 出 我 们 永远 的 承诺 。&gnbsp; </span> 
67 














</div> 
68 </td> 
69 EE 
70 <tr> 
对 <td id="td left"> 
机 <p id="bt1"><strong> 联 系 方式 </strong></P> 
3 <b> 医 疗 器 械 公司 </b> 
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74 <ul> 

75 <1i> 电 话 : 021-654300 (总 机 ) </1i> 

76 <1i> 传 真 : 021-654301 (总 经 办 ) </1i> 

YY <1i> 网 址 : http://www.888.cn</1i> 

78 <1i> 邮 箱 : mbpeizhi@163.com</1i> 

79 <1i> 地 址 : 上 海 市 杨浦 区 蓝天 路 </1i> 

80 <1i> 邮 编 : 200000</1i> 

81 <1i> 营 销 部 : 021-65434 (经 理 室 ) </1i> 

82 <1i> 售 后 服务 : 021-65189</1i> 

83 </ul> 

84 </td> 

85 </tr> 

86 <tr> 

87 <td colspan="2" > 

88 <div id="footer"> 

89 <ul> 

90 <1i> 医 疗 器 械 版 权 所 有 2017-2020 湘 ICP 备 8888888 </1i> 

91 <1i> 地 址 :上 海 市 杨浦 区 蓝天 路 电话 :021-654300 
E-mail:mbpeizhi@163.com</1i> 

92 <1i> Powered by MetInfo 5.2.10 ?2017-2020 
www.metinfo.cn</1i> 

93 </ul> 

94 </div> 

95 </td> 

96 </tr> 

97 </table> 

98 </body> 

99 </html> 


上 述 代码 中 第 11 一 97 行 定义 一 个 5 行 2 列 的 表格 作为 网 页 的 基本 布局 。 第 25 一 38 行 
定义 单元 格 跨 列 合并 后 嵌 套 一 个 1 行 6 列 的 表格 ， 用 作 导 航 菜单 ， 省 略 了 二 级 导航 菜单 的 
设计 。 第 44~51 行 采用 定义 列表 定义 垂直 导航 菜单 。 整 个 页 面 设计 中 采用 无 序列 表 、 定 义 
列表 、 表 格 单元 格 合并 、 表 格 嵌 套 、 图 像 嵌 入 、 图 层 嵌 套 等 技术 综合 实现 。 要 使 页 面 达到 
实际 布局 效果 ， 还 需要 进行 CSS 样式 定义 。 

3. CSS 样式 定义 

根据 表格 布局 图 ， 分 别 对 表格 的 不 同 单元 格 进行 样式 定义 ，CSS 规则 如 下 所 示 : 


/* edu 11 7 1.css */ 
*{font-size:12px;padding:0px;margin:0px;} 
a{font-size:14px;} 
#tablel{padding:0px;margin:0px auto;width:1004px;border:0px;} 
#logo{background:#D3D6DD;width:1004px;height:40px;} 
#floatl{float:left;width:141px;height:35px;} 
#floatr{float:right;text-align:right;width:862px;height:25px;padding: 
Spx Opx;} 

8 #floatr a{text-decoration:none;color:#000000;} 

9 #table2{padding:0px;margin:0px;width:100%;height:40px;text-align:center;} 

10 #nav{background:url ("bg blue.jpg");text-align:center;} 

11 #nav a:link,a:visited,a:hover,a:active{text-decoration:none; 

12 Color:#FFFFFF; font-size:14px; font—-weight:bold;} 

13 #nav td{text-align:center;vertical-align:middle;width:15%;} 

14 #td left{width:24%; 

15 height:145px; font-size:14px;background:#ECFOF]1;color:#67F78;} 

16 #tqd left a:link,a:visited,a:hover,a:active{color:#000000; text— decoration: 
none;} 


wm 必 wN 


E #td right{padding:25px;width:76%;height:350px;font-size:12px;color: 


站 
a 
| 
We | 
| 
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18 #td left ul,dl{height:180px;line-height:1.5em;} 

19 1i,dd,b{padding-left:25px;display:block;color:#67F78;} 

20 dt,#btl{background:url("bt bg small.jpg") left center no-repeat; 

21 font-size:16px;margin-left:15px;padding:5px auto;height: 


22 border-bottom:1px solid #D2D2D2;margin:10px auto;} 
23 #img bg{width:5px;height:24px;padding:2px;border:0px;} 

24 strong{padding-top:0px;font-size:16px;font-weight:bold;} 

25 #divl{line-height:1.S5em;text-indent:2em;color:#67F78;} 

26 #footer{text-align:center;margin:15px auto;/* footer */} 
27 #footer ul li{list-style:none;line-height:1.5em;} 


本 章 小 结 


章 主 要 介绍 了 设计 表格 的 所 有 标记 和 标记 属性 。 

在 进行 表格 设计 , 需要 考虑 好 表格 的 对 齐 方式 设计 。 表 格 的 对 齐 方式 分 三 类 : 表格 table 
标记 的 align 属性 、 行 tt 标记 的 align 和 valign、 列 〈 单 元 格 ) td 标记 的 align 和 valign。 这 
些 属性 的 设置 如 果 使 用 CSS 样式 进行 定义 ， 效 果 更 好 。 

设计 表格 的 背景 颜色 与 背景 图 像 时 ， 最 好 采用 CSS 样式 表 ， 这 样 效 果 更 易 控 制 。 

由 于 表格 的 单元 格 内 的 内 容 不 同 ， 如 果 插入 大 的 图 像 或 视频 文件 时 网 络 延 迟 会 很 大 ， 
易 造 成 网 页 打 不 开 ， 影 响 网 站 的 正常 访问 。 通 常 采 用 表格 进行 布局 时 ， 会 使 用 表格 嵌 套 来 
细 化 页 面 布局 。 表 格 嵌 套 时 ， 必 须 在 单元 格 中 榜 入 表格 。 


练习 与 实验 





练习 11 
1. 选择 题 
(1) 设置 围绕 表格 的 边框 宽度 的 正确 的 标记 是 ( )。 
A. <table size=""> B. <table border=""> 
C. <table bordersize=""> D. <tableborder=""> 
(2) 定义 表 头 的 标记 是 吉 
A. <table> </table> B. <td></td> 
C. < D. <th></th> 
(3) 下 列 标记 中 能 够 实现 跨 多 行 的 是 ( 。 )。 
A. <thcolspan=""> </th> B. <trrowspan=""></th> 
C. <td colspan=""></td> D. <tdrowspan=""></td> 
(4) 设置 表格 的 背景 图 像 正 确 的 标记 是 (。”)。 
A. <trbackground=""> B. <table background =""> 
C. <th sre=""> D; <t ee="> 
(5) 能 够 设置 表格 的 标题 的 标记 是 入 
A. <tbody> </tbody> B. <tfoot></tfoot> 
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Web 育 弦 开交 帮 大 一 TIMTI、CSS3、JavaScript ( 荔 了 猎 ) 











C. <thead> </thead> D. <caption></caption> 
(6) 设置 表格 行 牌 直 居中 的 标记 是 ( 。 )。 
A. <tralign="center" > B. <trvalign="middle" > 
C. <tralign="middle" > D. <trvalign="center "> 
2. 填空 题 
(1) 表格 的 标题 标记 是 ， 表 格 行 的 标记 是 ， 单 元 格 的 表 头 标记 是 
(2) 单元 格 跨 3 行 ， 设 置 格式 为 <td =" "></td>;， 单元 格 跨 5 列 ， 设 置 
格式 为 <td =" "></td>。 
(3) 表格 的 外 部 边框 样式 可 以 使 用 属性 来 定义 ， 表 格 内 部 边框 样式 可 以 使 用 
(4) 单元 格 边 距 属性 是 ; 单元 格 间距 属性 是 六 
3. 简 答题 


(1) 写 出 定义 表格 的 所 有 常用 标记 ， 并 说 明 各 自 的 作用 。 
(2) 写 出 定义 表格 边框 的 所 有 属性 ， 并 说 明 其 作用 。 
(3) 表格 行 对 齐 方式 有 几 类 ? 它们 的 属性 取 值 有 什么 不 同 ? 
实验 11 


1. 编写 HTML 代码 ， 实 现 如 图 11-12 所 示 页 面 效果 。 要 求 使 用 CSS 样式 表 统一 定义 
table 和 td 标记 样式 ， 分 别 如 下 : 

。 table 标记 样式 : 边框 为 8px、 线 型 为 双 线 、 颜 色 为 #0000ff。 

。 td 标记 样式 ， 边框 为 ljpx、 线 型 为 solid、 颜 色 为 black、 水 平 居 中 对 齐 。 

。 两 个 嵌 套 表格 背景 颜色 分 别 为 #ffffee 和 #fefefe。 

。 外 表 宽 度 为 300px、 居 中 对 齐 、 单 元 间距 和 单元 格 边 距 均 为 0。 

。 两 个 子 表 宽 度 为 80%、 居 中 对 齐 、 边 框 为 1px。 

2. 采用 表格 布局 完成 CASIO 计算 器 外 观 设计 ， 其 中 表格 的 每 一 个 单元 格 均 需 要 设计 
带 边 框 ， 效 果 如 图 11-13 所 示 。 
































































































































图 11-12 表格 布局 设计 图 11-13 计算 器 页 面 布局 设计 








本 章 学 习 目标 


运用 CSS+DIV 技术 可 以 根据 用 户 需求 设计 各 式 各 样 、 丰 富 多 彩 的 网 站 ， 用 户 通过 济 
览 器 去 浏览 网 站 的 信息 ， 但 这 样 的 网 站 仅 是 信息 的 发 布 者 和 提供 者 ， 用 户 也 只 是 网 站 信息 
的 浏览 者 ， 网 站 无 法 与 用 户 进行 交互 。 如 果 需 要 通过 网 站 采集 用 户 的 有 关 信 息 或 用 户 需要 
向 网 站 管理 员 反 馈 相 关 信息 ， 除 了 使 用 邮件 之 外 ， 最 有 效 的 方法 就 是 在 网 站 上 设计 表单 。 
表单 可 以 让 用 户 在 线 提交 相关 信息 给 服务 器 。 服务器 接收 到 信息 之 后 ， 进 行 相应 业务 处 理 
后 再 将 处 理 结果 返回 给 用 户 或 管理 者 。 

Web 前 端 开 发 工程 师 应 掌握 以 下 内 容 

。 理解 Web 网 页 中 表单 的 概念 与 作用 。 

。 掌握 表单 结构 语法 及 属性 语法 。 

。 掌握 表单 控件 (元 素 ) 标 记 语法 及 属性 语法 。 

。 掌握 域 和 域 标题 标记 语法 。 

。 学 会 综合 运用 表单 及 表单 控件 (元 素 ) 设 计 Web 网 页 。 


12.1 表单 概述 


Web 网 页 中 的 表单 一 般 用 来 做 网 络 调查 、 用 户 在 线 注册 、 信 息 检索 及 网 站 服务 提供 商 
向 用 户 采 集 信 息 等 。 表 单 是 较为 复杂 的 HIML 元 素 ， 经 常 与 脚本 、 动 态 网 页 、 后 台数 据 处 
理 等 结合 在 一 起 使 用 ,是 设计 动态 网 页 的 必 备 元 素 。 利 用 表单 可 以 在 HIML 页 面 中 插入 一 
些 表单 控件 〈 元 素 )， 如 文本 框 、 提 交 按 钮 、 重 置 按 钮 、 单 选 按钮 、 复 选 框 、 下 拉 列 表 框 等 ， 
完成 各 类 信息 的 采集 。 


12.1.1 表单 标记 
表单 form 标记 为 成 对 标记 ， 以 <form> 开 始 和 </form> 结 束 。 表 单 定义 了 采集 数据 的 范 





围 ， 其 所 包含 的 数据 内 容 将 被 完整 地 提交 给 服务 器 。 
1. 基本 语法 
1 <form method="post" action=""> 
2 <input type="text" name=""> 
3 <textarea name="" rows="" cols=""></textarea> 
4 <select name=""> 
5 <option value="" selected></option> 
6 <option value=""></option> 
时 </select> 
8 </form> 
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2. 语法 说 明 

<form> 和 </form> 之 间 可 包含 各 种 表单 信息 输入 标记 。 代 码 中 第 2 行 是 单行 文本 输入 
框 、 第 3 行 是 多 行文 本 域 、 第 4~7 行 是 下 拉 列 表 框 。 

3. 属性 说 明 

表单 标记 的 属性 主要 有 name、action、method、enctype 等 ， 其 属性 、 取 值 及 说 明 如 表 
12-1 所 示 。 


表 12-1 表单 标记 属性 、 取 值 及 说 明 
说 













明 











name 规定 表单 的 名 称 
action 规定 当 提 交 表单 时 ， 向 何 处 发 送 表单 数据 

规定 如 何 发 送 表单 数据 。post 方法 主要 包含 名 称 / 值 对 ， 并 且 无 须 包 含 
method 于 action 属性 的 URL 中 。get 方法 把 名 称 / 值 对 加 在 action 的 URL 后 


面 并 且 把 新 的 URL 送 至 服务 器 ， 不 推荐 使 用 


1 <!-- edu 12 1 1.html --> 





2 <!doctype html> 了 

3 <html lang="en"> 视频 讲解 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 表 单 的 使 用 实例 </title> 

汪 </head> 

8 <body> 

9 <form name="forml" method="post" action="form action.jsp" enctype= 
"text/plain"> 

10 <h3> 输 入 课程 成 绩 </h3> 

11 姓名 :<input type="text"/><br/> 

12 高 等 数学 :<input type="text" size="15"/> 

了 大 学 物理 :<input type="text" size="15"/><br/><br/> 

14 <input type="submit" value=" 成 绩 提交 "/> 

15 <input type="reset" value=" 成 绩 重 置 "/> 

16 </form> 

3 </body> 

18 </html> 

4. 代码 解释 


代码 中 第 9 一 16 行 定义 了 一 个 表单 ， 指 定 该 表单 的 名 称 为 form1， 提 交 方 式 为 post， 
处 理 程序 为 form actionjsp， 编 码 方式 为 text/plain; 第 11 一 13 行 定 义 了 三 个 单行 文本 输入 
框 ， 用 于 输入 学 生 的 姓名 和 课程 成 绩 ， 第 14 行 定义 一 个 提交 按钮 ， 第 15 行 定 义 一 个 重 置 
按钮 。 


























图 12-1 表单 使 用 实例 


12.2 ”定义 域 和 域 标题 


利用 fieldset 标记 可 以 在 网 页 上 定义 域 ,在 表单 中 使 用 域 可 以 将 表单 的 相关 元 素 进行 分 


组 。fieldset 标记 将 表单 内 容 的 一 部 分 打包 ， 生 成 一 组 相关 表单 的 字段 。 当 一 组 表单 元 素 放 
到 fieldset 标记 内 时 ， 浏 览 器 会 以 特殊 方式 来 显示 它们 ， 它 们 可 能 有 特殊 的 边界 、3D 效果 ， 
或 者 可 创建 一 个 子 表单 来 处 理 这 些 元 素 。legend 标记 为 fieldset 标记 定义 域 标题 。 


标 


1. 基本 语法 


<form> 
<fieldset> 


1 
2 
入 <legend align="left|center|right"> 域 标题 内 容 </legend> 
4 </fieldset> 

5 </form> 


2. 属性 语法 

fieldset 标记 没有 属性 ， 是 成 对 标记 。legend 标记 必须 位 于 fieldset 标记 内 ， 也 是 成 对 
未 记 ; 有 一 个 对 齐 align 属性 ， 属 性 值 分 别 为 left、center、right。 

【 例 12-2-1】 域 和 域 标题 标记 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 12-2 所 示 。 

1 <!-- edu 12 2 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 











4 <head> 本 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 定 义 域 和 域 标题 实例 </title> 
7 </head> 
8 <body> 
9 <form> 

10 <fieldset> 

11 <legend align="center"> 基 本 信息 </legend> 

12 姓名 : <input name="name" type="text"> 

13 性 别 : <input name="sex" type="text"> 

14 </fieldset> 

LS <fieldset> 

16 <legend align="center"> 其 他 信息 </legend> 

这 : <input name="height" type="text"> 

18 <input name="weight"type="text"> 

19 </fieldset> 

20 </form> 
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1 </body> 
22 </html> 














图 12-2 域 和 域 标题 的 应 用 实例 


3. 代码 解释 
代码 中 第 10 一 14 行 定 义 了 一 个 域 ， 域 标题 为 “基本 信息 ” 包含 姓名 和 性 别 信息 ; 第 
15 一 19 行 定义 了 另外 一 个 域 ， 域 标题 为 “其 他 信息 ” 包含 身高 和 体重 信息 。 


12.3 ”表单 信息 输入 


表单 的 主要 功能 是 为 用 户 提 供 输 入 信息 的 接口 ， 将 输入 信息 发 送 到 服务 器 并 等 待 服务 
器 响应 。 表单 中 输入 信息 的 标记 是 input 标记 ， 可 以 输入 一 行 信息 。input 标记 是 单个 标记 。 
1. 基本 语法 


<input name="" type="" /> 


2. 属性 说 明 

表单 输入 信息 标记 的 属性 主要 有 name、type 等 ， 输 入 类 型 是 由 类 型 type 属性 定义 的 。 
type 属性 有 很 多 不 同 的 值 ， 设 置 属 性 值 不 同 ， 就 会 产生 不 同 界面 效果 。input 标记 的 属性 、 
取 值 及 说 明 如 表 12-2 所 示 。 


表 12-2 ”表单 信息 输入 标记 属性 、 取 值 及 说 明 





属 说 明 

name 定义 input 元 素 的 名 称 
text lpassword | 规定 input 元 素 的 类 型 。text: 单 行文 本 输入 框 ， password: 
checkbox |radio | 密码 输入 框 ; checkbox: 复 选 框 ，radio: 单 选 按钮 ，image: 

gps image lsubmit reset | 图 像 按钮 submit 提 交 按钮 ，reset 重 置 按钮 ，button: 普 
button |file [bidden 通 按钮 ，file: 文 件 选 择 框 ，hidden: 隐 藏 杠 


12.3.1 单行 文本 输入 框 

设置 input 标记 的 type 属性 值 为 text， 可 以 实现 向 表单 中 插入 一 个 单行 文本 框 。 在 单 
行文 本 框 中 可 以 输入 任意 类 型 的 数据 ， 但 是 输入 的 数据 只 能 单行 显示 ， 不 能 换行 。 

1. 基本 语法 

<input name="" type="text" maxlength="" size="" value="" readonly /> 


2. 属性 说 明 
单行 文本 输入 框 的 主要 属性 有 name、maxlength、size、value、readonly， 其 属性 、 取 


值 及 说 明 如 表 12-3 所 示 。 
表 12-3 文本 输入 框 标记 属性 、 取 值 及 说 明 














属 性 说 明 
name 定义 input 元 素 的 名 称 
maxlength 规定 输入 字段 中 的 字符 的 最 大 长 度 
size 定义 输入 字段 的 宽度 。 其 值 小 于 或 等 于 最 大 长 度 
value | value 规定 input 元 素 的 默认 值 
Teadonly readonly 规定 文本 框 中 内 容 只 读 ， 不 能 修改 和 编辑 





12.3.2 密码 输入 框 


设置 input 标记 的 type 属性 值 为 password， 可 以 实现 向 表单 中 插入 一 个 密码 输入 框 。 
密码 输入 框 中 可 以 输入 任意 类 型 的 数据 ， 与 单行 文本 输入 框 有 所 不 同 ， 这 些 数据 不 是 显 式 
地 显示 在 页 面 上 ， 而 是 被 显示 字符 “。 ”所 取代 ， 这 样 设计 可 以 保障 用 户 输入 的 密码 不 被 





泄露 。 
1. 基本 语法 
<input name="" type="password" maxlength="" size=""/> 
2. 属性 说 明 
密码 输入 框 的 主要 属性 、 取 值 及 说 明 如 表 12-4 所 示 。 
表 12-4 密码 输入 框 属性 、 取 值 及 说 明 





属性 说 明 
name |name | 定义 input 标 记 的 名 称 
maxlength | number ”| 规定 输入 字段 中 的 字符 的 最 大 长 度 
size 定义 输入 字段 的 宽度 。 其 值 小 于 或 等 于 最 大 长 度 


【 例 12-3-1】 用 户 信息 输入 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 12-3 所 示 。 


1 <1== eda 12 3 1.html ==> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 单 行文 本 输入 框 实例 </title> 
7 </head> 
8 <body> 
3 <h4> 输 入 用 户 信息 </h4> 
10 <form> 
11 用 户 名 : <input type="text" name="chu" maxlength="20" size= "10"/> 
身份 : <input type="text" name="" readonly value=" 学 生 "><br> 
13 密 gnbsp; gnbsp; gnbsp; gnbsp; 码 :<input type="password" name= "psw" 
maxlength="20" size="10"> 
14 </form> 
15 </body> 
16 </html> 
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(TOP Pox| espxraxesn “上 和 


输入 用 户 信息 
用 户 名 : 信 入 良 身份 :学 生 








总 


密码 eeeeod 





图 12-3 输入 用 户 信息 


3. 代码 解释 

代码 中 第 11 行 在 表单 中 插入 一 个 单行 文本 输入 框 ， 其 名 称 为 chu， 并 定义 最 大 长 度 为 
20、 显 示 宽 度 为 10， 将 超出 宽度 时 ， 输 入 内 容 向 左 移动 ， 直 到 达到 最 大 长 度 为 止 ， 文 本 框 
的 默认 值 为 空 ; 第 12 行 插入 一 个 单行 文本 框 ， 赋 初 值 为 “学 生 ” 且 定 义 了 readonly 属性 ， 
此 文本 框 不 可 修改 。 第 13 行 插入 一 个 密码 框 ， 其 名 称 为 psw， 并 定义 最 大 长 度 为 20、 显 
示 宽 度 为 10， 将 超出 宽度 时 ， 输 入 内 容 向 左 移动 ， 直 到 达到 最 大 长 度 为 止 。 密 码 输入 框 中 
输入 的 字符 显示 为 “。”。 
12.3.3 复 选 杠 


设置 input 标记 的 type 属性 值 为 checkbox， 可 以 实现 向 表单 中 插入 一 个 复 选 枉 ， 用 户 
可 利用 复 选 框 在 网 页 上 设置 多 项 选择 。 

1. 基本 语法 

<input name="" type="checkbox" value="" checked=”checked”/> 

2. 属性 说 明 

复 选 框 的 主要 属性 有 name、value、checked， 其 中 checked 属性 用 于 设置 初始 预选 项 。 
复 选 框 的 属性 、 取 值 及 说 明 如 表 12-5 所 示 。 


表 12-5 复 选 框 属性 、 取 值 及 说 明 





属 性 说 明 
定 XIU 也 的 名 称 
value 规定 input 标记 的 值 

ee 预先 还 定 复 这 和 














于 复 选 择 框 可 以 支持 多 选 ， 每 一 个 复 选 框 都 是 不 同 的 ， 一 组 复 选 框 的 所 有 name 属 
性 值 应 该 不 同 ，value 属性 值 也 应 该 不 同 。 
12.3.4“ 单 选 按钮 

设置 input 标记 的 type 属性 值 为 radio， 可 以 实现 向 表单 中 插入 一 个 单 选 按钮 ， 用 户 可 
利用 单 选 按钮 在 网 页 上 为 某 一 选择 设置 多 个 单 选 项 。 

1， 基 本 语法 


<input name="" type="radio" value="" checked="checked"/> 








2. 属性 说 明 
单 选 按 钮 的 属性 有 name、value 和 checked 等 ， 其 属性 、 取 值 及 说 明 如 表 12-6 所 示 。 


表 12-6 单 选 按 钮 属性 、 取 值 及 说 明 






















属 性 值 说 明 
name | name 定义 input 标记 的 名 称 
value value 规定 input 标记 的 值 












checked checked 预先 选 定单 选 按钮 





由 于 单 选 按钮 必须 是 唯一 的 ， 所 以 在 一 组 单 选 按 钮 中 ， 只 能 选择 一 个 单 选 按钮 ， 所 以 
一 组 单 选 按钮 的 所 有 name 属性 值 必须 相同 ，value 属性 取 值 应 该 不 同 。 
【 例 12-3-2】 复 选 框 与 单 选 按钮 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 12-4 所 示 。 





El ==> 
2 <!doctype html> 


3 <html lang="en"> 加 
4 <head> 视频 讲解 





5 <meta charset="UTF-8"> 

6 <title> 复 选 框 与 单 选 按钮 的 应 用 </title> 

7 <style type="text/css"> 

8 fieldset {width:300px;height:120px;border:2px double #003399; 
padding-left:30px;} 

9 </style> 


10 </head> 
11 <body> 


3 <form> 

和 3 <fieldset> 

14 <legend> 请 填写 个 人 信息 </legend><br> 

EE 姓名 : <input type="text" name="xm" maxlength="10" size= "10"><br> 
16 爱好 : <input type="checkbox" name="cl"” value=" 读 书 "/> 读 书 
Ey <input type="checkbox" name="c2" value=" 唱 歌 "checked= "checked"/> 唱 歌 
18 <input type="checkbox"” name="c3" value=" 游 戏 " checked="checked"/> 游 戏 <br> 
19 性 别 : <input type="radio" name="sex" value="male" checked="checked"/> 男 性 
20 <input type="radio" name="sex" value="female"/> 女 性 

21 </fieldset> 

22 </form> 

23 </body> 

24 </html> 

3. 代码 解释 


代码 中 第 8 行 定义 fieldset 标记 的 样式 ， 第 13 一 21 行 在 表单 中 插入 域 和 域 标题 标记 ， 
对 表单 元 素 进 行 分 组 ， 其 中 第 15 行 在 表单 中 插入 单行 文本 输入 框 ， 第 16 一 18 行 分 别 在 表 
单 中 插入 三 个 复 选 框 , name 属性 值 分 别 为 cl、c2 和 c3, value 属性 取 值 分 别 为 “读书 ”“ 唱 
歌 ” 和 “游戏 ” 并 给 input 标记 设置 checked 属性 ， 将 名 称 为 c2 和 c3 复 选 框 设 置 为 预选 
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项 ; 第 19 一 20 行 在 表单 中 插入 两 个 单 选 按钮 ，name 属性 值 均 为 sex，value 属性 值 分 别 为 
male 和 female， 并 给 input 标记 设置 checked 属性 ， 将 “男性 ” 单 选 按钮 设置 成 预选 项 。 





Ea 站 FWebii BS -Ox 
请 填写 个 人 信息 





姓名 [于 小 可 
爱好 :， 回 读书 国 唱歌 团 游戏 
性 别 。 加 男性 @ 女 性 











图 12-4” 复 选 框 与 单 选 按 钮 的 应 用 


12.3.5 ”图像 按钮 


设置 mput 标记 的 type 属性 值 为 image, 可 以 实现 向 表单 中 插入 一 个 图 像 按 钮 , 用户 可 
利用 图 像 按钮 在 网 页 中 插入 一 张 图 像 ， 通 过 src 属性 加 载 图 像 。 

1. 基本 语法 

<input name="" type="image" src="" width="" height=""/> 

2. 属性 说 明 

图 像 按钮 主要 属性 有 name、src、width、height， 其 属性 、 取 值 及 说 明 如 表 12-7 所 示 。 


表 12-7 图 像 按 钮 属性 、 取 值 及 说 明 





属 性 说 明 
name 定义 input 标记 的 名 称 
SIC 定义 以 提交 按钮 形式 显示 的 图 像 的 URL 
width 规定 图 像 的 宽度 ， 单 位 为 像素 
height 规定 图 像 的 高 度 ， 单 位 为 像素 


【 例 12-3-3】 在 网 页 中 使 用 图 像 按钮 。 代 码 如 下 所 示 ， 页 面 效果 如 图 12-5 所 示 。 
.<!l== edu 12.3 3.Btml ==> 
2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
3 <meta charset="UTF-8"> 
6 <title> 图 像 按钮 实例 </title> 视频 讲解 
2 <style type="text/css"> 
8 body{text-align:center;} 

9 input {width:150px;height:120px;} 

10 </style> 

E 

12 

13 

14 





</head> 
<body> 
<form> 
<h3> 我 国 首 艘 航母 辽宁 号 </h3> 
15 <input type="image" name="image" src="liaoninghao.jpg" 
align="center"/> 
16 <input type="submit" value=" 提 交 "> 


ER 


</form> 


18 </body> 
19 </html> 


3. 代码 


解释 


代码 第 8 行 设置 body 标记 样式 为 内 容 居 中 ; 第 9 行 设置 input 标记 宽度 和 高 度 ; 第 15 
行 在 表单 中 插入 一 个 图 像 按钮 ， 名 称 为 image， 图 像 来 源 路 径 为 当前 目录 下 的 
liaoninghao jpg; 第 16 行 插入 一 个 提交 按钮 。 当 用 户 单 击 图 像 按钮 时 ，URI 中 会 显示 当前 


鼠标 的 坐标 位 置 值 (如 edu_12 3_3.html?image.x=76&image.y=69)。 





天 一 ey 一 
CD wr p- oxJSeesazn > 国 


我 国 首 条 航母 辽宁 号 


单 击 此 位 置 
a 


图 12-5 图像 按钮 实例 





12.3.6 ”提交 按钮 


设置 input 标记 的 type 属性 值 为 submit， 可 以 实现 向 表单 中 插入 一 个 提交 按钮 ， 提 交 
按钮 用 于 将 表单 的 信息 提交 至 服务 器 进行 处 理 。 


1. 基本 


<input 


语法 


name="" type="submit" value=" 提 交 "/> 


2. 属性 说 明 


提交 按钮 的 属性 主要 有 name、value， 其 属性 、 取 值 及 说 明 如 表 12-8 所 示 。 


表 12-8 ”提交 按钮 属性 、 取 值 及 说 明 








属 性 说 
name 定义 input 标记 的 名 称 
value 规定 input 标记 的 值 





在 表单 中 插入 提交 按钮 时 ， 如 果 不 设 置 属性 value 的 值 ， 它 的 初始 值 是 “提交 查询 按 


钮 "。 所 以 一 


定 要 给 value 属性 赋值 。 


12.3.7 重 置 按钮 


设置 input 标记 的 type 属性 值 为 reset， 可 以 实现 向 表单 中 插入 一 个 重 置 按钮 ， 


钮 用 于 将 表 自 


中 所 有 的 输入 信息 清空 ， 然 后 让 用 户 可 以 重新 填写 。 








1. 基本 语法 


<input 


name="" type="reset" value=""> 





二 
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2. 属性 说 明 
重 置 按钮 的 属性 主要 有 name 和 value， 其 属性 、 取 值 及 说 明 如 表 12-9 所 示 。 
表 12-9 重 置 按钮 属性 、 取 值 及 说 明 














属 性 说 ” 明 
name 定义 input 标记 的 名 称 
value 规定 input 标记 的 值 


12.3.8 普通 按钮 

设置 input 标记 的 type 属性 值 为 button， 可 以 实现 向 表单 中 插入 一 个 普通 按钮 。 普 通 
按钮 在 网 页 设计 非常 有 用 ， 如 果 不 通 过 表单 提交 按钮 来 处 理事 件 ， 则 可 以 给 普通 按钮 绑 定 
事件 代码 ， 来 实现 所 需 的 功能 。 

1. 基本 语法 

<input name="" type="button" value="" onclick=""/> 


2. 属性 说 明 
普通 按钮 的 属性 有 name、value 和 onclick， 其 属性 、 取 值 及 说 明 如 表 12-10 所 示 。 


表 12-10 普通 按钮 属性 、 取 值 及 说 明 


属 性 说 明 
name 定义 input 标记 的 名 称 
value 规定 input 标记 的 值 





onclick 事件 代码 绑 定 事件 代码 、 自 定义 函数 或 直接 使 用 脚本 代码 
【 例 12-3-4】 三 种 按钮 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 12-6 所 示 。 


bi ar =TEGIIST 
ERTTEIPREEEI ET 王国 
三 种 按钮 的 应 用 
请 输入 用 户 信息 














用 户 名 ，chu 调 丰 ，weeooee 


[sme |E 7 























图 12-6 三 种 按钮 的 应 用 


1 <!-- edu 12 3 4.html --> 
2 <!doctype html> 
3 <html lang="en"> 
<head> 上 
<meta charset="UTF-8"> EY 
<title> 三 种 按钮 的 应 用 </title> 视频 讲解 
<style type="text/css"> 
input {width:100px;height:25px;} 
body{text-align:center;} 
fieldset {width:400px;height:180px;} 
</style> 




















FOo~aw 心 


户 记 


12 </head> 


13 <body> 

14 <form> 

FE <fieldset> 

16 <legend> 三 种 按钮 的 应 用 </legend> 

El <h3> 请 输入 用 户 信 息 : </h3> 

18 用 户 名 : <input type="text" name="username" size="10"/> 

19 密码 : <input type="password" name="password" size="10"/> 
<br/><br>gnbsp; gnbsp; 

20 <input type="submit" name="submit" value=" 提 交 "/> 

2 <input type="reset" name="reset" value=" 重 置 "/> 

2 <input type="button" name="button" value=" 注 册 新 用 户 " onclick= 
"javascript:alert (' 注 册 新 用 户 ');"/> 

23 </fieldset> 

24 </form> 

25 </body> 

26 </html> 

3， 代码 解释 


代码 中 第 8 一 10 行 分 别 定义 了 input、body、fieldset 标记 的 样式 ， 第 15 一 23 行 在 表单 
中 插入 域 和 域 标题 标记 ， 对 表单 元 素 进 行 分 组 ， 第 20 行 在 表单 中 插入 一 个 提交 按钮 ， 名 称 
为 submit， 值 为 “提交 ” 第 21 行 在 表单 中 插入 一 个 重 置 按 钮 ， 名 称 为 reset, 值 为 “ 重 置 ”; 
第 22 行 在 表单 中 插入 一 个 普通 按钮 ， 名 称 为 button， 值 为 “注册 新 用 户 ”。 选 择 “ 注 册 新 
用 户 ” 按 钮 后 ， 触 发 onclick 事件， 执行 JavaScript 代码 ， 弹 出 “注册 新 用 户 ” 告 警 框 ， 如 
图 12-6 所 示 。 
12.3.9 文件 选择 框 

设置 input 标记 的 type 属性 值 为 fle， 可 以 实现 向 表单 中 插入 一 个 文件 选择 框 。 

1. 基本 语法 

<input name="" type="file"> 

2. 属性 说 明 

name: 定义 input 标记 的 名 称 。 页 面 上 会 自动 添加 一 个 文本 输入 框 和 一 个 “浏览 …” 
按钮 。 单 击 “ 浏 览 ...” 按 钮 可 以 从 “选择 要 加 载 的 文件 ”对 话 框 选择 某 一 个 文件 ， 然 后 将 
文件 名 称 回填 到 文本 输入 框 中 ， 但 并 没有 做 任何 其 他 操作 。 
12.3.10 ”隐藏 框 

设置 input 标记 的 type 属性 值 为 hidden， 可 以 实现 向 表单 中 插入 一 个 隐藏 框 ， 用 户 提 
交 表单 时 ， 隐 藏 框 的 信息 也 会 一 起 提交 到 服务 器 ， 但 隐藏 框 在 网 页 中 是 不 可 见 的 。 

1. 基本 语法 

<input name="" type="hidden" value="" /> 

2. 属性 说 明 

隐藏 框 的 属性 有 name 和 value， 其 属性 、 取 值 及 说 明 如 表 12-11 所 示 。 
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表 12-1L 隐藏 框 属性 、 取 值 及 说 阴 











属 性 说 明 
name 定义 input 标记 的 名 称 
value 规定 input 标记 的 值 





【 例 12-3-S】 文 件 选择 框 与 隐藏 框 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 12-7 所 示 。 


1 <== Gdu 12 3 5.html =-=> 
2 <!doctype html> 
3 <html lang="en"> 
<head> 
<meta charset="UTF-8"> 视频 讲解 


4 
5 
6 <title> 文 件 选 择 框 与 隐藏 框 的 应 用 </title> 
3 
8 





<style type="text/css"> 
fieldset {width:500px;height:200px;margin:20px;} 
</style> 
10 </head> 
11 <body> 


12 <form> 

13 <fieldset> 

14 <legend> 文 件 选择 框 与 隐藏 框 的 应 用 </legend> 

15 <h4> 请 输入 个 人 信息 : </h4> 

16 姓名 :<input type="text" name="name" size="10"/> 

于 时 性 别 :<input type="radio" name="sex" value="male"/> 男 
18 <input type="radio" name="sex" value="female"/> 女 gnbsp; 
19 年 龄 :<input type="text" name="age" size="8"/><br/> 
20 <h4> 请 选择 照片 文件 : </h4> 

21 <input type="file" name="file"><br> 

22 <input type="hidden" name="admin" value="ABCD"> 

23 </fieldset> 

24 </form> 

25 </body> 

26 </html> 

3. 代码 解释 


代码 中 第 8 行 定义 了 fieldset 标记 的 样式 ， 第 12 一 24 行 插入 表单 ， 并 在 表单 中 插入 域 
和 域 标题 标记 ; 第 16 行 、 第 19 行 在 表单 中 分 别 插入 一 个 单行 文本 输入 框 ; 第 17 行 、 第 
18 行 分 别 插入 一 个 单 选 按钮 ; 第 21 行 插入 一 个 文件 选择 框 ， 名 称 为 fle， 用 户 可 选择 相关 
文件 。 选 择 “ 浏 览 ...” 按 钮 后 ， 弹 出 “选择 要 添加 的 文件 ”对 话 框 ， 如 图 12-7 右 图 所 示 ， 
选择 edu_12 2_1.html 后 ， 单 击 “ 打 开 ” 按 钮 ， 所 选 文件 的 名 称 自动 回填 到 文本 输入 框 内 。 














)[ 辐 mwebiiia 直 全 Pp- Ox|Sxnamesess. x ee 
文件 选择 杠 与 隐藏 栓 的 应 用 鲍 F 

请 输入 个 人 信息 ， 

姓名 : 稍 欠 良 。 性别 :加 男 日 女 年 擒 56 | 上 

请 选择 文件 : 
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图 12-7 文件 选择 框 与 隐藏 框 的 应 用 


12.4 多 行文 本 输入 框 


网 站 管理 员 经 常 需要 收集 用 户 对 某 一 事件 的 看 法 或 征求 一 下 用 户 的 意见 ， 而 用 户 的 反 
馈 意见 往往 比较 长 , 而 单行 文本 输入 框 不 能 满足 这 一 要 求 。textarea 标记 可 以 向 表单 中 插入 
多 行文 本 输入 框 。 多 行文 本 输入 框 可 以 用 来 输入 较 多 的 文字 信息 ， 而 且 可 以 换行 ， 并 将 这 
些 信息 提交 到 服务 器 。 

1. 基本 语法 

<textarea name="" rows="" cols="" wrap=""/> 初 始 信 息 内 容 </textarea> 

<textarea rows="" cols="" wrap="soft|hard"></textarea><!-- HTML5 定 义 --> 


2. 属性 说 明 

多 行文 本 输入 框 textarea 标记 是 成 对 标记 ， 其 主要 属性 有 name、rows、cols、wrap 等 ， 
其 属性 、 取 值 及 说 明 如 表 12-12 所 示 。 默 认 情 况 下 ， 当 用 户 在 文本 区 域 中 输入 文本 后 ， 浏 
览 器 会 将 它们 按照 输入 时 的 状态 发 送 给 服务 器 。 只 有 在 用 户 按 下 Enter 键 的 地 方 生成 换行 。 


表 12-12 多 行文 本 输入 框 属性 、 取 值 及 说 明 
说 明 

定义 textarea 标记 的 名 称 
TOWS 规定 文本 区 内 的 可 见 行 数 
cols | number ”| 规定 文本 区 内 的 可 见 宽度 
wrap 属性 规定 当 在 表单 中 提交 时 ， 文 本 区 域 中 的 文本 如 何 换行 
wrap 一 文本 区 会 包含 一 行文 本 ， 用 户 必须 将 光标 移动 到 右边 才能 看 到 全 
部 文本 ， 这 时 将 把 一 行文 本 传送 给 服务 器 ; virtual 一 将 实现 文本 区 内 的 
wraplvirtual 自动 换行 ， 但 在 传输 给 服务 器 时 ， 文 本 只 在 用 户 按 下 Enter 键 的 地 方 进 
|physicallo 企 行 换行 ,其 他 地 方 没有 换行 的 效果 ; physical 一 一 将 实现 文本 区 内 的 自动 
换行 ， 并 以 这 种 形式 传送 给 服务 器 ; o 企 一 不 会 自动 换行 ， 输 入 内 容 超出 
文本 域 右 界 时， 文本 将 向 左 滚动 ， 必 须 按 Enter 键 才能 将 插入 点 移 到 下 
- 行 。HTML5 中 ，sof 表示 提交 时 不 换行 ，hard 表示 提交 时 换行 





wrap 








【 例 12-4-1】 征 求 意见 表 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 12-8 所 示 。 


<== edu 12 4 .html ==> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 征 求 意见 表 </title> 

7 </head> 

8 <body> 

9 <form> 
10 <h3> 请 您 填写 宝贵 意见 : </h3> 
11 <textarea name="info" rows="4" cols="50" wrap="virtual"> 
12 </textarea> 
13 </form> 
14 </body> 
15 </html> 


二 已 汕 


基 闻 
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3. 代码 解释 
代码 中 第 11 行 在 表单 中 插入 了 一 个 4 行 50 列 的 多 行文 本 输入 框 ,名 称 为 info， wrap 
值 设 为 virtual， 即 文本 区 自动 换行 。 











请 您 填写 宝贵 意见 





工 -进一步 改善 服务 态度 
2. 优 化 服务 环境 。 





图 12-8 多 行文 本 输入 框 实例 


12.5 下 拉 列 表 框 


下 拉 列 表 可 以 在 表单 中 接收 用 户 的 输入 。 下 拉 列 表 通 常 需要 同时 使 用 select 和 option 
标记 来 在 表单 中 插入 下 拉 菜 单 和 列表 项 。 
1. 基本 语法 
select name="" size="" multiple> 
<option value="" selected> 文 字 信息 </option> 
<option value=""></option> 
/selecE> 
2. 属性 说 明 
select 标记 是 成 对 标记 ，option 标记 是 单个 标记 ， 但 应 该 把 它 补 成 成 对 标记 ， 结 构 更 为 
清晰 。select 标记 有 name、size、multiple 等 属性 。option 标记 有 value、selected 等 属性 。 
select 标记 与 option 标记 必须 配合 使 用 .每 一 选项 必须 指定 一 个 显示 的 文本 和 一 个 value 值 ， 
显示 文本 通常 附 在 option 标记 后 面 。 它 们 的 属性 、 取 值 及 说 明 如 表 12-13 所 示 。 


表 12-13 select 和 option 标记 属性 、 取 值 及 说 明 






规定 下 拉 列 表 框 中 可 见 选项 的 数目 


| size | 

| multiple | multiple | 规定 可 选择 多 个 选项 
。 value 规定 列表 项 的 什 

oe selected selected 设置 预选 列表 项 


【 例 12-$-1】 下 拉 列 表 框 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 12-9 所 示 。 












1 <!-- edu 12 5 1.html --> 
2 <!doctype html> 

3 <html lang="en"> 

4 <head> Oc 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 下 拉 列 表 框 的 应 用 </title> 

有 </head> 

8 


<body> 


9 <form> 


10 <h3> 请 选择 您 的 课程 :</h3> 

11 <select name="course" size="4" multiple> 
4 <option value="cl" selected>C/C++ 程 序 设计 </option> 
和 <option value="c2"> 计 算 机 网 络 </option> 

14 <option value="c3" > 数据 结构 </option> 

15 <option value="c4">Java 程 序 设计 </option> 
16 <option value="c5"> 计 算 机 组 成 原理 </option> 
了 </select> 

18 </form> 

19 </body> 

20 </html> 

3. 代码 解释 


代码 中 第 11 一 17 行 插入 了 一 个 下 拉 列 表 框 ,名 称 为 course, 选项 数目 为 4, 设置 multiple 
属性 支持 多 选 ， 第 12 一 16 行 插入 了 5 个 列表 项 ， 列 表 项 内 容 为 课程 名 称 ， 其 中 第 12 行 设 





12-9 下 拉 列 表 框 实例 


12.6 综合 实例 


以 “第 十 八 届 中 国 国际 广告 节 会 议 注册 表 ” 页 面 为 例 ， 其 页 面 效 果 如 图 12-10 所 示 。 
采用 11 行 9 列 的 表格 布局 来 完成 页 面 设计 , 注册 界面 使 用 表单 和 表单 控件 来 实现 。 实 


现 的 代码 如 下 所 示 : 


De 2 -cx|asr'ermmrrre | 
第 十 八 届 中 国 国际 广告 节 会 议 注册 表 




















图 12-10 第 十 八 届 中 国 国际 广告 节 会 议 注册 表 效 果 图 
1 <!-- edu 12 6 1.html --> 


2 <!doctype html> 
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3 <html lang="en"> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 第 十 八 届 中 国 国际 广告 节 会 议 注册 表 </title> 

7 <style type="text/css"> 

8 body{text-align:center;} 

9 hl{font-size:25px; text-align:center;} 

10 .zhuce{font-size:14px;text-align:center;width:840px; margin: 0 
auto;background:#f7f7f7;} 

寺 生 -Zhuce td{border:lpx solid #3300cc;padding:2px 3px;} 

3 本 .Zhuce .ibg{text-align:left;} 

13 -Zhuce .bbg{padding:10px 0;font-size:13px;} 

14 #bt {width:100px;height:35px;background:#99ffcc;} 

15 </style> 


16 </head> 
17 <body> 


18 <h1> 第 十 八 届 中 国 国 际 广告 节 会 议 注册 表 </h1> 

Ee <form> 
20 <table class="zhuce"> 
21 <tr> 
22 <td width="100px"> 参 会 者 姓名 </td> 
23 <td colspan="4" class="ibg"> 
24 <input name="txtName" type="text"> 
25 </td> 
26 <td> 职 务 </td> 
eh <td colspan="3" class="ibg"> 
28 <input name="txtZhiwu" type="text"> 
29 </td> 

30 </tr> 

3 < 七 > 

32 <td> 工 作 单位 </td> 

33 <td colspan="8" class="ibg"> 

34 <input name="txtDanwei" type="text" style= "width: 

S500px; "> 

35 </td> 

36 </tr> 

37 <tr> 

38 <td> 电 话 </td> 

39 <td colspan="2" class="ibg"> 

40 <input name="txtTel" type="text"> 
41 </td> 

42 <td> 传 真 </td> 
43 <td class="ibg"> 

44 <input name="txtFax" type="text"> 
45 </td> 
46 <td colspan="3"> 手 机 </td> 

47 <td class="ibg"> 

48 <input name="txtMobil" type="text"> 
49 </td> 

50 /EE> 
二 <tr> 
52 <td> 通 讯 地 址 </td> 
53 <td colspan="6" class="ibg"> 
54 <input name="txtAddress" type="text" style= "width: 

400px; "> 
55 </td> 
56 <td> 邮 编 </td> 


57 <td class="ibg"> 


58 
59 
60 
61 
62 
63 
64 
180px; "> 
65 
66 
67 
68 
"width: 180px;"> 
69 


<input name="txtPostCode" type="text"> 
</td> 
</tr> 
<tr> 
<td>E-mail</td> 
<td colspan="6" class="ibg"> 
<input name="txtEmail" type="text" style= "width: 


</td> 
<td> 国 家 </td> 
<td class="ibg"> 
<select name="ddlCountry" id="ddlCountry" style= 


<option value=" 中 国 "” selected > 中 国 </option> 





<option 欧洲 -英国 "> 欧洲 -英国 </option> 
<option 南美 洲 -巴西 "> 南美 洲 -巴西 </option> 
<option 美国 "> 美国 </option> 
<option 非洲 -南非 "> 非洲 -南非 </option> 
</select> 
</td> 
</tr> 
< 
<td> 省 份 </td> 


<td colspan="6" class="ibg"> 
<select name="ddlProvince" style="width:180px;"> 


<option value=" 请 选择 "> 请 选择 </option> 












<option value=" 北 京 市 "> 北京 市 </option> 
<option value=" 天 津 市 "> 天 津 市 </option> 
<option value=" 重 庆 市 "> 重庆 市 </option> 





<option value=" 上 海 市 "> 上 海 市 </option> 
</select> 
</td> 
<td> 城 市 </td> 
<td class="ibg"> 
<input name="txtCity" type="text" style="width: 180px; "> 
</td> 
</tr> 
<tr> 
<td colspan="9"><p> 会 议 费 标准 人民币) </p></td> 
</tr> 
EE 
<td colspan="2"> 身 份 / 时 间 </td> 
<td colspan="4">2011 年 9 月 20 日 之 前 注册 </td> 
<td colspan="3">2011 年 9 月 20 日 之 后 注册 </td> 
/te> 
<tr> 
<td colspan="2"> 中 广 协会 员 </td> 
<td colspan="4"> 
<input type="radio" name="rbMem" value="rbMeml">1500 元 
</td> 
<td colspan="3"> 
<input type="radio" name="rbMem" value="rbMem2">1800 元 
</td> 
</tr> 
<tr> 
<td colspan="2"> 非 会 员 </td> 
<td colspan="4"> 
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Web 育 帝 开交 故 大 一 TINMTI、CSS3、JavaScript ( 荔 了 猎 ) 









113 <input type="radio" name="rbMem" value= "TbNcMeml">1800 元 
114 </td> 

115 <td colspan="3"> 

116 <input type="radio" name="rbMem" value="rbNoMem2">2000 元 
Fy /td> 

118 /Er> 

119 EE 

120 <td colspan="9" class="bbg"> 

21 <input id="bt" type="submit" name="btnOk" value=" 提 交 "> 
122 <input id="bt" type="reset"><br><br> 

323 <a href=" 邀 请 函 和 注册 表 2011 .doc"> 第 十 八 届 中 国 国际 广告 节 注册 表 下 载 </a> 
124 </td> 

5 </tr> 

126 </table> 

127 </form> 


128 </body> 
129 </html> 


代码 解释 

代码 中 第 17 一 127 行 在 HTML 的 body 标记 中 插入 表单 ， 在 表单 中 又 插入 一 个 11 行 9 
列 的 表格 ; 

第 24 行 、28 行 、34 行 、40 行 、44 行 、48 行 、54 行 、58 行 、64 行 插入 单行 文本 输 
入 框 ， 分 别 用 于 输入 参 会 者 姓名 、 职 务 、 工 作 单 位 、 电 话 、 传 真 、 手 机 、 通 讯 地 址 、 邮 编 、 
E-mail 等 信息 ; 

第 68 一 74 行 插入 下 拉 列 表 框 ， 用 于 输入 用 户 所 属国 家 ， 中 国 为 预选 状态 ; 

第 80 一 86 行 插入 下 拉 列 表 框 ， 用 于 输入 用 户 所 属 省 份 ; 

第 104 行 、107 行 、113 行 、116 行 插入 单 选 按钮 ， 输 入 会 员 信息 和 缴费 信息 ; 

第 121 行 、 第 122 行 分 别 插入 提交 按钮 和 重 置 按钮 ， 用 于 提交 整个 表单 信息 和 清空 表 
单 内 容 。 


本 章 小 结 


表单 是 Web 服务 器 端 和 客户 端 进行 信息 交互 的 主要 桥梁 。Web 服务 器 通过 含有 表单 和 
表单 控件 的 Web 页 面 完成 用 户 信 息 的 采集 。 表 单 有 三 个 重要 属性 ， 分 别 是 name、action、 
method。 表 单 有 12 个 常用 表单 控件 ， 分 别 是 单行 文本 输入 框 、 密 码 输 入 框 、 复 选 框 、 单 选 
按钮 、 图 像 按钮 、 提 交 按钮 、 重 置 按钮 、 普 通 按 钮 、 文 件 选择 框 、 隐 藏 框 、 多 行文 本 输入 
框 、 下 拉 列 表 框 。 使 用 域 和 域 标题 可 以 对 表单 元 素 进行 合理 分 组 。 组 合 运 用 这 些 标记 ， 可 
以 使 HTML 网 页 和 用 户 更 加 灵活 地 交互 信息 。 


练习 与 实验 
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1. 选择 题 
(1) 下 列 选 项 不 是 表单 标记 的 属性 是 〈 )。 
A. method B. action C. enctype D. option 


〈2) 下 列 选项 不 是 input 标记 的 type 属性 值 的 是 (  )。 











A. password B. radio C. textarea D. button 

(3) 下 列 input 标记 的 类 型 属性 取 值 表示 复 选 框 的 是 (  )。 

A. hidden B. checkbox C. radio D. select 

(4) 下 列 input 标记 的 类 型 属性 取 值 表示 单 选 按钮 的 是 六 

A. hidden B. checkbox C. radio D. select 

(5) 用 于 设置 文本 输入 框 显示 宽度 的 属性 是 和 

A. size B. maxlength C. value D. length 

2. 填空 题 

(1) 表单 form 标记 中 ，method 属性 的 取 值 可 以 为 和 

(2) 表单 是 Web 和 Web 之 间 实 现 信息 交流 和 传递 的 桥梁 。 

(3) <select> 标 记 必 须 与 “标记 配合 使 用 ， 包含 、 和 

(4) 标记 用 于 定义 多 行文 本 输入 框 ， 指 定 行 数 的 属性 为 ， 指 定 列 数 
的 属性 为 

(5) 重 置 按 钮 的 type 属性 值 为 ， 提 交 按 钮 的 type 属性 值 为 ， 普 通 按 
钮 的 type 属性 为 

(6) 一 组 复 选 框 中 复 选 框 的 name 属性 值 必须 ，Value 值 也 必须 ; 而 一 


组 单 选 按 钮 中 每 一 个 单 选 按 钮 的 name 属性 值 必须 ，value 属性 值 必须 

(7) 通过 属性 可 以 将 某 一 复 选 框 、 单 选 按 钮 设置 为 默认 预选 状态 ; 通过 
属性 以 将 下 拉 列 表 框 中 的 某 一 选项 设置 为 默认 预选 状态 。 

(8) 使 用 标记 可 以 定义 域 ， 使 用 标记 可 以 定义 域 的 标题 。 


实验 12 
1. 编写 程序 实现 如 图 12-11 所 示 的 登录 页 面 。 


2. 利用 表单 和 表单 元 素 设计 简单 的 应 聘 页 面 ， 如 图 12-12 所 示 ， 写 出 实现 的 HTML 
代码 。 





类 型 管理 内 日 普通 用 户 
回 记 住 密码 回 国生 
国 





网 络 游戏 
仪器 仪表 /工业 自动 化 Esa 














图 12-11 登录 页 面 效 果 图 图 12-12 应 聘 页 面 效 果 图 
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本 章 学 习 目标 


随 着 移动 互联 技术 不 断 发 展 ，HTML5、CSS3、JavaScript、jQuery Mobile 等 技术 在 移 
动 端 应 用 越 来 越 普及 ， 所 以 学 会 移动 开发 技术 已 经 是 势 在 必 行 了 。 本 章 主要 简单 地 介绍 
HTML5 的 新 特点 、 新 增加 标记 及 新 增 属性 ,学 会 运用 CSS3 新 特性 来 改变 网 页 的 外 在 表现 ， 
以 增加 用 户 的 体验 。 

Web 移动 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 熟悉 掌握 HTMLS5 新 特性 。 

。 掌 握 HTMLS 页 面 结构 。 

。 学 会 使 用 HTMLS5 新 增 元 素 和 新 增 属性 。 

。 掌握 HTMLS 新 增 表 单元 素 及 新 增 属性 的 设置 方法 。 

。 学 会 使 用 HTMLS 的 Audio 和 Video 媒体 元 素 。 

。 学 会 HTML5 本 地 存储 开发 简易 Web 应 用 。 

。 学 会 使 用 CSS3 的 转换 、 过 渡 和 动画 等 特性 设计 页 面 的 动态 效果 。 
学 会 设置 与 应 用 CSS3 文本 效果 及 多 列 等 属性 。 


W3C (World Wide Web Consortium， 万 维 网 联盟 ) 自 2008 年 1 月 22 日 公布 HIMLS 
草案 到 2014 年 10 月 28 日 发 布 正式 标准 ， 历 时 多 年 终于 完成 标准 的 制定 。 目 前 HIML5 已 
经 成 为 HTML、XHTML 及 HTML DOM 的 新 标准 ， 大 多 数 浏览 器 已 经 支持 HIML5 技术 。 
2016 年 11 月 1 日 W3C 正式 发 表 了 HIML5.1 推荐 标准 , 该 推荐 标准 定义 了 HTML 语言 
5 个 版 本 的 第 1 个 小 版 本 (https:/www.w3.org/TR/2016/REC-html51-20161101/)， 绝 大 多 数 
的 主流 浏览 器 已 经 能 够 实现 或 即将 实现 HTML5.1 引入 的 新 特性 和 变化 , 同时 W3C 已 在 着 
手 制定 下 个 版 本 HTML5.2。 


13.1 _ HTMLS 概述 





于 HTML4.01 标准 的 标记 能 力 不 足 ， 而 XHTML1.0 标准 又 过 于 严格 、 兼 容 性 差 ， 实 
际 Web 应 用 开发 中 很 难 完全 遵守 W3C 所 制定 的 规范 。Web 应 用 开发 中 面临 许多 困境 ， 如 
很 多 人 开始 怀疑 Flash 的 安全 性 等 问题 ， 但 又 找 不 到 合适 的 插件 ，Web 前 端 开 发 工程 师 纷 
纷 埋怨 在 开发 PC 端 和 移动 端 应 用 时 ， 仍 然 需要 为 微软 、 蔷 果 、 安 卓 等 系统 设计 不 同方 案 。 
2004 年 ， 为 了 推动 Web 标准 化 运动 的 发 展 ， 由 Apple、Opera、Google、Mozilla 等 公司 发 
起 ， 与 一 些 浏览 器 生产 厂家 和 相关 团体 共同 成 立 一 个 协作 组 织 ， 称 之 为 WHATWG (Web 
Hypertext Application Technology Working Group，Web 超 文 本 应 用 技术 工作 组 ), WHATWG 


























组 织 专门 致力 于 Web 表单 和 应 用 程序 ， 当 时 W3C 专注 于 XHTML 2.0 标准 的 制定 。2006 
年 10 月 ，W3C 决定 与 WHATWG 合作 共同 研制 HTMLS5 相关 技术 标准 。 

在 HTML5 中 需要 和 弄 清楚 元 素 、 标 记 和 属性 的 相关 概念 ， 以 便于 正确 理解 和 阅读 本 章 
的 内 容 。 标 记 就 是 被 尖 括 号 “<” 和 “>” 包 围 起 来 的 关键 字 ， 表 示 特 定 功 能 的 符号 。 绝 大 
部 分 的 标记 都 是 双 (成 对 ) 标记 ， 如 <html></html>、<head></head> 等 。 少 部 分 是 单 (个 ) 
标记 ， 如 <br>、<hr>、<meta>、<link> 等 。 标记 就 是 用 来 说 明 HTML 元 素 的 。 一 个 非 空 
HTML 元 素 是 由 开始 标记 、 元素 的 属性 和 值 、 内 容 和 结束 标记 组 成 的 ， 是 构成 HTML 文件 
的 基本 对 象 。 位 于 起 始 标记 和 结束 标记 之 间 的 文本 就 是 HTML 元 素 的 内 容 。 为 HTML 元 
素 提供 各 种 附加 信息 的 就 是 HTML 属性 ， 它 总 是 以 属性 名 =" 属 性 值 " 这 种 名 值 对 的 形式 出 
现 ， 而 且 属性 总 是 在 HTML 元 素 的 开始 标记 中 进行 定义 。 示 范 代码 如 下 所 示 : 








<html> 
<head> <!-- 这 是 开始 标记 --> 
<title> 元 素 、 标 记 和 属性 讲解 </title> <!-- 这 是 一 个 title 元 素 --> 
</head> <!-- 这 是 结束 标记 --> 
<body onload="alert (' 页 面 装载 !1');"> ”<!-- 这 是 在 开始 标记 内 定义 属性 并 赋值 --> 
<h3> 这 是 元 素 的 内 容 </h3> <!-- 这 是 一 个 h3 元 素 --> 
</body> 
</html> 


在 这 个 示例 中 ,“<h3> 这 是 元 素 的 内 容 </h3>” 就 是 HTML 元 素 ， 其 中 “这 是 元 素 的 内 
容 ” 就 是 元 素 的 具体 内 容 。<head>、<title>、<body> 等 就 是 HTML 标记 ， 这 些 标记 构成 了 
HTML 元 素 。<body onload="alert(' 页 面 装载 ! "); "> 中 的 onload="alert(' 页 面 装载 ! );" 就 是 
标记 的 属性 ， 总 之 ， 元 素 和 标记 的 区 别 也 不 必 太 在 意 ， 实 际 工作 中 都 直接 以 标记 统称 。 而 
属性 就 是 为 HTML 标记 添加 各 种 附加 信息 或 者 配置 选项 的 参数 。 


13.1.1 HTMLS 的 八 个 特性 


HTML5 具有 八 个 特性 , 分 别 对 应 八 种 logo (https:Wwww.w3.org/htmllogo/#kdownloads ) ， 
如 图 13-1 所 示 ， 左 边 为 HTMLS 的 新 logo， 右 边 为 HITML5 八 个 特性 的 logo。 


HTML 人 关 G@ 诈 
口 口 称 

到 3 

图 13-1 HITMLS 的 新 logo 


1. 语义 特性 〈Semantic) 
HIML5 赋予 网 页 更 好 的 意义 和 结构 。 更 加 丰富 的 标记 集 将 随 着 对 RDFa (RDF 
attribute)、 微 数据 与 微 格式 等 方面 的 支持 , 构建 对 程序 .用 户 都 更 有 价值 的 数据 驱动 的 Web。 


2. 离线 与 存储 特性 (Offline & Storage) 第 
基于 HTMLS5 开发 的 网 页 APP 拥有 更 短 的 启动 时 间 ， 更 快 的 联网 速度 ， 这 些 全 得 益 于 | 13 
章 





HTML5 故 动 与 CSS3 应 局 


Web 育 弦 开交 老大 一 TINMTI、CSS3、JavaScript ( 务 了 猎 ) 





HIML5 APP Cache、 本 地 存储 功能 、Indexed DB 和 File API 说 明文 档 。 

3. 设备 访问 特性 (Device Access) 

从 Geolocation 功能 的 API 文档 公开 以 来 ，HTML5 为 网 页 应 用 开发 者 们 提供 了 更 多 功 
能 上 的 优化 选择 ， 带 来 了 更 多 体验 功能 的 优势 。HTMLS5 提供 了 前 所 未 有 的 数据 与 应 用 接 
入 开放 接口 。 使 外 部 应 用 可 以 直接 与 浏览 器 内 部 的 数据 相连 ， 例 如 视频 影音 可 直接 与 麦克 
风 及 摄像 头 相连 。 

4. 多 媒体 特性 (Multimedia) 

支持 网 页 端的 Audio、Video 等 多 媒体 功能 ， 与 网 站 自 带 的 APPS、 摄 像 头 、 影 音 功 能 
相得益彰 。 

5. 三 维 、 图 形 与 特效 特性 (3D、Graphics & Effects) 

基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能 ， 用 户 会 惊叹 于 浏览 器 所 呈现 的 惊人 
视觉 效果 。 

6. 性 能 与 集成 特性 〈Performance & Integration) 

没有 用 户 愿意 一 直 等 待 一 一 HTML5 会 通过 Web Workers 和 XMLHttpRequest2 等 技术 ， 
帮助 Web 应 用 和 网 站 在 多 样 化 的 环境 中 更 快速 地 工作 。 

7. 连接 特性 (Connectivity) 

更 高 的 连接 工作 效率 ， 使 基于 页 面 的 实时 聊天 、 更 快速 的 网 页 游戏 体验 、 更 优化 的 在 
线 交 流 得 以 实现 。HTML5 拥有 更 有 效 的 服务 器 推送 技术 ，Server-Sent Event 和 WebSockets 
就 是 其 中 的 两 个 特性 ， 这 两 个 特性 能 够 帮助 我 们 实现 服务 器 将 数据 “推送 ”到 客户 端的 
功能 。 

8. CSS3 特性 (CSS3) 

在 不 牺牲 性 能 和 语义 结构 的 前 提 下 ，CSS3 中 提供 了 更 多 的 风格 和 更 强 的 效果 。 此 外 ， 
较 之 于 之 前 的 Web 排版 、Web 的 开放 字体 格式 (“Web Open Font Format，WOFF) 提供 了 
更 高 的 灵活 性 和 控制 性 。 


13.1.2 ”HTMLS 的 优势 


1. 摆脱 对 平台 的 依赖 

HITML5 摆脱 了 对 平台 的 依赖 ， 用 户 打 开 浏览 器 ， 直 接 就 可 以 访问 自己 的 应 用 ， 而 不 
需要 经 过 各 种 Store 的 审核 。 

2. 实时 更 新 

实时 更 新 ， 通 常平 台 的 审核 都 需要 七 个 工作 日 左右 的 时 间 ， 在 发 布 之 后 发 现 问题 怎么 
办 ?Web 方式 就 不 存在 这 种 问题 。 

3. 离线 使 用 

用 户 可 以 离线 使 用 ， 更 新 下 载 量 较 少 ， 可 以 全 部 更 新 ， 也 可 以 选择 替换 部 分 文件 。 

4. 代码 更 安全 

使 用 HTML5， 代 码 更 安全 。 众 所 周知 ，Web 应 用 有 一 个 很 大 的 问题 就 是 代码 的 安全 
性 问题 ， 但 现在 HIML5 可 以 将 Web 代码 全 部 加 密 ， 本 地 应 用 解密 后 再 运行 ， 大 大 提高 了 
代码 的 安全 性 。 




















5. 跨 平台 


HTML5 可 以 做 到 跨 平台 ， 大 部 分 核心 代码 不 需要 重 写 ，JavaScript 的 代码 可 以 在 许多 
地 方 使 用 ， 包 括 移动 应 用 、 移 动 网 站 、PC 网 站 、 各 种 浏览 器 插件 ， 甚 至 可 以 用 WebKit 封 
装 作为 跨 平 台 的 应 用 程序 。 

6. 可 以 充分 利用 Native 

HTMLS5 可 以 通过 浏览 器 作为 中 介 充 分 利用 Native 的 好 处 ， 例 如 可 以 使 用 GPS、 照相 
机 、 本 地 相册 、 读 取 本 地 联系 人 ， 也 可 以 使 用 推送 功能 等 ， 最 重要 的 是 ， 某 些 Web 无 法 实 
现 的 功能 ， 可 以 利用 Native 来 实现 。 


13.1.3 HTMLS 新 增 结构 元 素 及 页 面 元 素 
HTML5 中 新 增 结 构 元 素 如 表 13-1 所 示 。 


元 
header 
DaV 
Section 
article 
aside 
footer 


素 





表 13-1 HTMLS5 新 增 结构 元 素 表 
说 明 

页 面 或 页 面 中 某 一 个 区 块 的 页 眉 ， 通 常 是 一 些 引 导 和 导航 信息 
可 以 作为 页 面 导 航 的 链接 组 
页 面 中 的 一 个 内 容 区 块 ， 通 常 由 内 容 及 其 标题 组 成 
代表 一 个 独立 的 、 完 整 的 相关 内 容 块 ， 可 独立 于 页 面 其 他 内 容 使 用 
非 正 文 的 内 容 ， 与 页 面 的 主要 内 容 是 分 开 的 ， 被 删除 而 不 会 影响 到 网 页 的 内 容 
页 面 或 页 面 中 某 一 个 区 块 的 脚 


HTML5 中 新 增 页 面 元 素 如 表 13-2 所 示 。 


表 13-2 HTMLS5 新 增 其 他 页 面 元 素 表 






































元 素 说 ”了 明 
Video 定义 视频 。 像 电影 片段 或 其 他 视频 流 
audio 定义 音频 。 如 音乐 或 其 他 音频 流 
embed 用 来 嵌入 各 种 媒体 内 容 。 格 式 如 Midi、Wav、AIFF、AU、MP3 及 Flash 等 
mark 主要 用 来 在 视觉 上 向 用 户 呈 现 那些 需要 突出 显示 或 高 亮 显示 的 文字 
表示 运行 中 的 进程 ， 可 以 使 用 progress 元 素 显示 JavaScript 中 耗 时 时 间 函 数 的 进程 。 
等 待 中 、 请 稍 候 等 
time 表示 日 期 或 时 间 ， 也 可 以 两 者 同时 
定义 ruby 注释 〈 中 文 注音 或 字符 )。ruby、tt 元 素 一 同 使 用 。ruby 元 素 由 一 个 或 多 个 
ruby 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 式 元 素 组 成 ,还 包括 可 选 的 tp 元素 ， 
定义 当 浏 览 器 不 支持 "mby” 元 素 时 显示 的 内 容 
rt 定义 字符 (中 文 注音 或 字符 ) 的 解释 或 发 音 
Dp 在 ruby 注释 中 使 用 ， 以 定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 
by 表示 软 换行 。 br 元 素 表示 此 处 必须 换行 ; wbr 表示 浏览 器 窗 | ] 或 父 级 元 素 足 够 宽 时 ( 没 
必要 换行 时 ) 不 换行 ， 而 宽度 不 够 时 主动 在 此 处 换行 
定义 图 形 ， 例 如 图 表 和 其 他 图 像 。 该 元 素 只 是 图 形容 器 (画布 )， 必 须 使 用 脚本 来 给 
Canvas 制图 形 
表示 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 按钮 。 只 有 当 command 元 素 位 于 menu 元 
command 





素 内 时 ， 该 元 素 才 是 可 见 的 ， 和 否则 不 会 显示 这 个 元 素 ， 但 是 可 以 用 它 规定 键盘 快捷 键 
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元 素 说 明 
于 描述 文档 或 文档 某 个 部 分 的 细节 。 可 与 summary 元 素 配合 使 用 ，summary 可 以 为 
details details 定义 标题 。 标 题 是 可 见 的 ， 用 户 单 击 标题 时 ， 会 显示 出 details。summary 应 该 
是 details 的 第 一 个 子 元 素 
定义 选项 列表 。 与 input 元 素 配合 使 用 该 元 素 ， 来 定义 input 可 能 的 值 。datalist 及 其 
datalist 选项 不 会 被 显示 出 来 , 它 仅仅 是 合法 的 输入 值 列表 。 使 用 input 元 素 的 list 属性 来 绑 定 
datalist 
output 定义 不 同类 型 的 输出 ， 例 如 脚本 的 输出 
source 为 媒介 元 素 (如 video 和 audio) 定义 媒介 资源 
定义 菜单 列表 。 当 希 望 列 出 表单 控件 时 使 用 该 元 素 。 注 意 与 nav 的 区 别 ，menu 专门 
用 于 表单 控件 





13.1.4 HTMLS 废除 的 元 素 与 属性 


1. HTMLS 废除 的 元 素 

HTML4.01 之 前 有 些 标记 被 不 赞成 使 用 ，HTMLS5 已 经 淘汰 了 ， 建 议 使 用 CSS 来 替代 。 
还 有 些 标记 HIMLS 已 经 不 再 支持 ， 所 以 也 需要 淘汰 。 

(1) 纯 表现 的 元 素 ， 如 font、basefont、center、big、s、u、strike 、tt。 

(2) 对 可 用 性 产生 负面 影响 的 元 素 ， 如 frameset、frame、noframes 等 元 素 。HTML5 
只 文 持 浮动 框架 (内 联 框 架 〉 iframe 元 素 。 

(3) 易 产 生 混淆 的 元 素 ， 如 acronym、applet、isindex、dir 等 元 素 。 

(4) 废除 只 有 部 分 浏览 器 支持 的 元 素 ， 如 blink、bgsound、marquee 等 元 素 。 

(5) 其 他 被 废除 的 元 素 ， 如 废除 由 ， 使 用 ruby 替代 ; 废除 listing， 使 用 pre 替代 ; 废 
除 xmp， 使 用 code 蔡 代 ; 废除 nextid， 使 用 guids 蔡 代 ; 废除 plaintex， 使 用 text/plian (无 
格式 正文 ) MIME 类 型 替代 。 

2，HTMLS 废除 的 属性 

HIML4.01 中 一 些 属性 在 HTMLS5 中 不 再 被 使 用 ， 而 是 采用 其 他 属性 或 其 他 方式 进行 
替代 。 这 些 属 性 如 表 13-3 所 示 。 


表 13-3 HTML5 废除 的 属性 表 




















废除 属性 隶属 元 素 HTML 5 替代 方案 
TeV link、a Tel 
ar 二 让 志 ee HITP Content-type 头 
shape、coords a 使 用 area 元 素 代 替 a 元 素 
longdesc img、iframe 使 用 a 元素 链接 到 较 长 描述 
target link 多 余 属性 ， 被 省 略 
nohref area 多 余 属性 ， 被 省 略 
profile head 多 余 属 性 ， 被 省 略 
version html 多 余 属性 ， 被 省 略 
name img id 
scheme meta 只 为 某 个 表单 域 使 用 scheme 























度 除 民 性 隶属 元 素 HTML 5 替代 方案 
archive、chlassid、codebose、 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 
codetype、 declare, standby | beet 这 些 属性 来 设置 参数 时 ， 使 用 param 属性 

使 用 name 与 value 属性 ， 不 声明 其 MIME 类 
valuetype、type param 型 

使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 文字 的 
axis、abbr td、 也 形式 。 可 以 对 更 详细 内 容 使 用 title 属性 ， 来 

使 单元 格 的 内 容 变 得 简短 

在 被 链接 的 资源 中 使 用 HITP Content-type 头 
scope td _ 

元 素 

caption, input, legend 、 

align div、hl、h2、h3、h4、| 使 用 CSS 样式 表 蔡 代 


alink 、link 、text 、vlink 、 
background、bgcolor 

align 、 bgcolor 、 border 、 
cellpadding 、 cellspacing 、 
frame、rules、width 
align、char、charoff、height、 
nowrap、valien 

align、 bgcolor、char、charo 储 、 
height、 nowrap、 valign、 width 
align、 bgcolor、char、charoff、 
valign 
align、char、charoff、valign、 
width 


h5、 h6、 p 


body 


table 


tbody、thead、tfoot 


td、 也 


col、colgroup 


使 用 CSS 样式 表 替 代 


使 用 CSS 样式 表 替 代 


使 用 CSS 样式 表 蔡 代 


使 用 CSS 样式 表 替 代 


使 用 CSS 样式 表 替 代 


使 用 CSS 样式 表 替 代 





























align、border、hspace、vspace | object 使 用 CSS 样式 表 替 代 
clear br 使 用 CSS 样式 表 替 代 
compace、 type ol ul li 使 用 CSS 样式 表 替代 
compace dl 使 用 CSS 样式 表 替 代 
compace menu 使 用 CSS 样式 表 替 代 
width pre 使 用 CSS 样式 表 替 代 
align、hspace、vspace img 使 用 CSS 样式 表 替 代 
align、 noshade、 size、 width | hr 使 用 CSS 样式 表 替 代 
align、 frameborder、scrolling、 

ee marginwidth | iaame 仆人 各 人 
autosubmit menu 

13.1.5 ”浏览 器 支持 与 选择 


一 些 低 版 本 的 浏览 器 并 不 支持 HIML5， 如 正 6 一 正 8 浏览 器 。 所 有 新 、 旧 浏览 器 ， 对 
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无 法 识别 的 元 素 均 会 视 作 内 联 (inline) 元 素来 自动 处 理 。 可 以 通过 其 他 方法 让 这 些 浏览 器 能 
够 处 理 “ 未 知 ” 的 HTML 元 素 。 
html5shiv 是 针对 正 浏览 器 比较 好 的 解决 方案 。html5shiv 主要 解决 HIMLS 提出 的 新 
的 元 素 不 被 了 6 一 正 8 识别 ， 这 些 新 元 素 不 能 作为 父 节点 包 庄 子 元 素 ， 并 且 不 能 应 用 CSS 
样式 的 问题 。 通 过 document.createElement(elementName) 方 法 实现 让 CSS 样式 应 用 在 未 知 
元 素 上 。html5shiv 就 是 根据 这 个 原理 创建 的 ， 使 用 是 非常 简单 的 。 
使 用 Sjoerd Visscher 创建 的 “HTML5 Enabling JavaScript?”， 即 “shiv( 开 门 闻 刀 )” 来 解 
决 该 问题 。 引 用 Google 的 html5jjs 文件 的 代码 如 下 所 示 : 
<head> 
<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 
上 述 代 码 以 注释 方式 呈现 , 其 作用 是 当 正 浏览 器 的 版 本 小 于 IE9 时 将 读 取 html5js 文 
件 ， 并 解析 它 。 也 可 以 从 https://github.com/aFarkas/html5shiv/ 上 直接 下 载 并 保存 到 本 地 项 
目 目录 中 ， 有 多 个 版 本 可 供 选择 。 
根据 需要 下 载 并 引用 外 部 JS 文件 ， 代 码 如 下 所 示 。 
<head> 
<!--[if 1]t IE 9]> 
<script src="projectPathName/html5shiv.js"></script> 


<! [endif]--> 
</head> 


最 后 在 CSS 文件 中 或 样式 表 中 添加 如 下 标记 样式 。 代 码 如 下 所 示 : 
/* html5 将 新 元 素 变 成 块 元 素 */ 


article,aside,dialog,header, section, footer, nav, figure,menu{displ 
ay:block} 


考虑 到 浏览 器 的 兼容 性 和 对 HIMLS 的 支持 情况 ， 根 据 http://html5test.com 测试 结果 ， 
选择 支持 HTML5 最 好 的 Google 公司 的 Chrome 浏览 器 作为 页 面 效 果 展 示 浏 览 器 。 


13.2 HTMLS 文档 结构 
HTML5 文档 结构 同样 是 由 头 部 和 主体 两 部 分 组 成 ， 只 是 新 增 了 一 些 结构 元 素 ， 如 
header、nav、article、section、aside、footer 六 个 结构 元 素 ， 这 些 元 素 都 是 ye 
13.2.1 HTMLS 页 面 结 构 


HIML4.01 之 前 , 通常 使 用 DIV+CSS 来 进行 页 面 布 局 , 采用 DIV 分 割 页 面 , 采用 CSS 
定义 DIV 的 样式 ， 页 面 效果 如 图 13-2 所 示 。HTMLS5 中 采用 页 眉 、 页 脚 、 导 航 、 文 章 内容 
等 结构 元 素来 进行 页 面 布局 ， 显 得 十 分 方便 ， 页 面 效果 如 图 13-3 所 示 。 





<div id=“header”> <header> 


<div class="article”> <article> 


<div id=“sidebar”> 


<aside> 
<div class=“section> 


<section> 





图 13-2 HTML4.01 页 面 布局 图 13-3 HTMLS5 结构 元 素 布局 
HTMILS 页 面 结构 元 素 语法 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<title>HTML5 文 档 结构 </title> 
</head> 
<body> 
<header> 
<nav>...</nav> 
</header> 
<article> 
<section>...</section> 
</article> 
<aside>...</aside> 
<footer>...</footer> 
</body> 
</html> 


13.2.2 HTMLS 新 增 结构 元 素 


1. header 标记 
header 标记 定义 文档 和 区 域 的 页 眉 ， 通 常 是 一 些 引 导 和 导航 信息 。 它 不 局 限于 写 在 网 


页 头 部 ， 也 可 以 写 在 网 页 内 容 里 面 。 通 常 <header> 标 记 至 少 包含 〈 但 不 局 限于 ) 一 个 标题 
标记 (hl 一 h6)， 也 可 以 包括 hgroup〔 标 题 组 合 ) 标记 、 表 格 标识 、 搜 索 表 单 、 导 航 等 。 


【 例 13-2-1】 标 题 组 合 标记 的 应 用 。 代 码 如 下 ， 页 面 如 图 13-4 所 示 。 


x1-= adu 13.2 1.html 一 一 人 > 
2 <!doctype html> 
3 <html lang="en"> 






@@!t 





回避 
4 <head> 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title>HTML5 结 构 元 素 header 和 hgroup 标 记 的 应 用 </title> 
7 </head> 
8 <body> 
9 <header> 
10 <hgroup> 
EE <h1>HTML5 是 下 一 代 的 HTML。</h1> 
Ee <h3> 什 么 是 HTML5? </h3> 
13 <h5>HTML5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。</h5> 
14 </hgroup> 
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15 </header> 
16 </body> 
17 </html> 








EE 7010505 m7 Rom /new em/eau17.2.21 二 妇 | | 
HTML5 是 下 一 代 的 HTML。 


什么 是 HTML5? 


HTMLS 将 电 为 HTML、XHTML 以 及 HTML DOM 的 新 奈 下 - 









图 13-4 HTML5 结构 元 素 header 应 用 


2. nav 标记 
nav 标记 代表 页 面 的 一 个 部 分 ， 是 一 个 可 以 作为 页 面 导航 的 链接 组 。 建议 不 要 在 footer 
元 素 中 使 用 nav 元 素 ， 否 则 易 造 成 页 面 显 示 不 正确 。 配 置 相 应 的 CSS 代码 可 以 实现 水 平 
导航 。 
【 例 13-2-2】 导 航 nav 标记 的 应 用 。 代 码 如 下 ， 页 面 如 图 13-5 所 示 。 
OCS 本 


© © [© We//F/WER.20140505 2 /wr RWBR/new chi7/edu 17. 0 女 | : 











图 13-5 ”HTML5 结构 元 素 nav 应 用 


1 <!=- edu 13 2 2.html =-> 
2 <!doctype html> 
3 <html lang="en"> 区 a 
<head> 
<meta charset="UTF-8"> 视频 讲解 
<title>HTML5 结 构 元 素 header 和 nav 标 记 的 应 用 </title> 
</head> 
<body> 
<header> 
<nav> 
<ul> 


4 
5 
6 
7 
8 
9 

10 

和 

入 <1i><a href="#">HTML 参考 手册 </a></1i> 

13 

14 

15 

16 

Ey 





<1i><a href="#">HTML 实例 </a></1i> 
<1i><a href="#">HTML 测验 </a></1i> 
</ul> 
</nav> 
</header> 
18 </body> 
19 </html> 


3. article 标记 

article 标记 是 一 个 特殊 的 section 标记 , 它 比 section 具有 更 明确 的 语义 , 它 代表 一 个 独 
立 的 、 完 整 的 相关 内 容 块 ， 可 独立 于 页 面 其 他 内 容 使 用 。 例 如 论坛 帖子 、 博 客 文章 、 新 闻 
故事 、 评 论 等 .一般 来 说 , article 会 有 标题 部 分 , 通常 包含 在 header 内 , 有 时 也 会 包含 footer。 
article 标记 可 以 嵌 套 ， 内 层 的 article 对 外 层 的 article 标记 有 素 属 关系 。 例 如 一 篇 博客 的 文 


章 可 以 用 article 显示 ， 然 后 后 续 的 一 些 评论 可 以 用 article 的 形式 嵌入 其 中 。 
【 例 13-2-3】 文 章 article 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-6 所 示 。 


1 < =- eda 13 2 3.html =-> 
2 <!dqoctype html> 
3 <html lang="en"> 





4 <head> 让 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title>HTML5 结 构 元 素 artical 和 header 标 记 的 应 用 </title> 

7 </head> 

8 <body> 

9 <article> 

0 <header> 

1 <hgroup> 

2 <h1>HTML 5 结构 标记 的 简介 </h1> 

3 <h2>HTML 5 的 诞生 </h2> 

4 </hgroup> 

5 <time datetime="2017-04-28">2017-04-28</time> 

6 </header> 

<p>HTML5 引入 了 许多 新 标签 ， 包 括 几 个 用 于 更 好 地 描述 文本 结构 的 标签 。 在 本 





文中 ， 我 们 将 了 解 这 些 HTML5 引入 的 新 的 结构 化 标签 以 及 如 何 使 用 它们 将 一 个 文档 划分 成 几 个 内 容 块 。 
</p> 





8 </article> 
9 </body> 
20 </html> 








= 
CO | 加 Me//FJWEB_20140505 大 2 桥 / 职 玉兰 办 后尘/new-Oh17/edu_17 .22.3htn 逢 全 | 
HTML 5 结构 元 素 的 简介 
HTML 5 的 诞生 


2017-04-28 


HTML5 引入 了 许多 新 元 系 ， 包括 几 个 几 于 型 季 地 撕 述 文本 洁 移 的 元 素 ， 在 本 文中 ， 瑰 们 梅 了 解 这 可 
HTML5 引入 的 新 的 结构 化 元 素 以 及 如 何 合用 它们 糙 一 个 文档 和 分 城 几 个 内 容 块 。 












图 13-6 HTML5 结构 元 素 article 应 用 

4. section 标记 

section 标记 定义 文档 中 的 节 。 例 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 一 般 用 于 
成 节 的 内 容 ， 会 在 文档 流 中 开始 一 个 新 的 节 。 它 用 来 表现 普通 的 文档 内 容 或 应 用 区 块 ， 通 
常 由 内 容 及 其 标题 组 成 。section 元 素 不 是 一 个 普通 的 容器 元 素 , 它 表 示 一 段 专题 性 的 内 容 ， 
可 以 带 有 标题 .如 果 描述 一 件 具体 的 事物 , 建议 使 用 article 来 代替 section; 如 果 使 用 section， 
仍 可 以 使 用 hl 作为 标题 ,而 不 用 担心 它 所 处 的 位 置 。 如 果 一 个 容器 需要 定义 样式 或 定义 行 
为 ， 建 议 用 div 元 素 。 

【 例 13-2-4】section 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-7 所 示 。 


1 <!-- edu 13 2 4.html 一 -> 
2 <!doctype html> 

3 <html lang="en"> 5 
<head> 
<meta charset="UTF-8"> 视频 讲解 





4 

入 

6 <title>HTML5 结 构 元 素 artical 和 section 标 记 的 应 用 </title> 
</head> 

8 <body> 

9 <section> 
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10 <h1>section 标 记 </h1> 

得 <p> 用 来 定义 文档 中 的 节 (section、 区 段 ) 。 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 
其 他 部 分 。</p> 

12 </section> 

13 <section> 

14 <h1>article 标 记 </h1> 

15 <p>article 标 记 标识 了 Web 页 面 中 的 主要 内 容 。 以 博客 为 例 , 每 篇 帖子 都 构成 一 
个 重要 内 容 。</p> 

16 </section> 

17 </body> 

18 </html> 
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section 标 记 


用 来 定义 文档 中 的 节 (section、 区 秽 。 比 如 章节 、 页 局、 页 县 或 文档 中 的 其 他 部 分 。 
article 标 记 


article 标 记 标识 了 Web 页 面 中 的 主要 内 容 ， 以 博客 为 例 ， 每 篇 帖子 部 构成 一 个 重要 内 容 , 








图 13-7 HTMLS5 结构 元 素 section 应 用 


S.，aside 标记 

aside〈 侧 栏 ， 也 称 为 旁 注 ) 标记 用 来 说 明 其 所 包含 的 内 容 与 页 面 主要 内 容 相 关 ， 但 不 
是 该 页 面 的 一 部 分 ， 类 似 于 使 用 括号 对 正文 进行 注释 (就 像 这 样 )。 括 号 中 的 内 容 提 供 关 于 
该 元 素 的 一 些 附 加 信息 ， 例 如 广告 、 成 组 的 链接 、 侧 栏 等 。 

【 例 13-2-$】aside 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-8 所 示 。 


= di 13 2.5.html ==> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <title>HTML5 结 构 元 素 aside 和 artical 标 记 的 应 用 </title> 

7 </head> 

8 <body> 

9 <header> 我 的 博客 </header> 

10 <section> 

EE <article> 

12 <p> 这 是 页 面 上 重要 的 内 容 部 分 。 也 许 是 博客 文章 。 带 aside 元 素 。</p> 

| <aside style="float:right;width:100px;height:100px;background: 
#EEFFCC; "> 

14 <p> 这 是 第 一 篇 博客 文章 。</p> 

15 </aside> 

16 </article> 

了 了 <article> 

18 <p> 这 是 页 面 上 重要 的 内 容 部 分 。 也 许 是 博客 文章 。 不 带 asige 元 素 </p> 

19 </article> 

20 </section> 


21 </body> 
22 </html> 
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mer 
这 量 黄 而 上 草 要 的 内 容 革 依 ， 岂 开源 少 宫 文 章 ， 尖 atide 元 要 
这 此 页 晶 上 蓝 要 的 办 奉 芝 分 ， 岂 放生 尖 宫 文 章 、 干 荡 aside 元 委 





图 13-8 HIML5 结构 元 素 aside 应 用 


6. footer 标记 

footer 标记 定义 section 或 文档 的 页 脚 ， 包 含 了 与 页 面 、 文 章 或 部 分 内 容 有 关 的 信息 ， 
例如 文章 的 作者 或 者 日 期 。 作 为 页 面 的 页 脚 时 ， 一 般 包 含 了 版 权 、 相 关 文 件 和 链接 。 它 与 
页 眉 header 标记 用 法 相同 ， 在 一 个 页 面 中 可 以 多 次 使 用 ， 若 在 一 个 区 段 的 最 后 使 用 footer 
标记 ， 那 么 它 就 相当 于 该 区 段 的 页 脚 。 

【 例 13-2-6】footer 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-9 所 示 。 




















图 13-9 HTML5 结构 元 素 footer 应 用 


L xt Bd 13 2 6html -=> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

3 <meta charset="UTF-8"> 

6 <title>HTML5 结 构 元 素 footer 和 section 标 记 的 应 用 </title> 

7 </head> 

8 <body> 

9 <footer> 

10 <div style="text-align:center;"> 

3 <section> 

12 <a href="http://www.caict.ac.cn/" target=" blank"> 
CAICT 中 国信 通 院 </a> 

33 <a href="//www.w3.0org/" target=" blank">W3C</a> 

14 <a href="//www.dcloud.io/" target=" blank">DCloud</a> 

15 </section> 

16 <span style="padding:2px 5px;"> 京 ICP 备 12046007 号 -5</span> 

1 <span style="padding:2px 5px;">HTML5 中 国产 业 联盟 版 权 所 有 </span> 

18 </div> 

19 </footer> 

20 </body> 

21 </html> 


13.3 ” HTMLS 新 增 页 面 元 素 


HTMLS5 除了 新 增 的 结构 元 素 header、nav、article、aside 、section、footer 外 ， 还 增加 
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元 素 (details、datagrid 和 command 等 ) 及 其 他 页 面 元 素 。 
13.3.1 hgroup 标记 


标题 组 合 hgroup 标记 是 对 网 页 或 区 段 section 的 标题 元 素 (hl1~h6) 进行 组 合 。 例 如 ， 
在 某 一 区 段 中 需要 连续 设置 多 个 标题 标记 ， 可 以 使 用 hgroup 标记 来 组 合 。 
【 例 13-3-1】hgroup 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-10 所 示 。 


1 <!-- edu 13 3 1.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title>HTML5 页 面 元 素 hgroup 标 记 的 应 用 </title> 

</head> 

8 <body> 

9 <hgroup> 

10 <h1>JSDoc+ 规 范 </h1> 

3 <h2 style="color:red;"> 介 绍 </h2> 

12 </hgroup> 

13 <p style="text-indent :2em; "> 编写 JSDoc 是 为 了 增强 代码 的 可 读 性 ， 以 及 方便 


导出 API 文 档 。 它 的 规范 可 参考 JSDoc 3。 对 于 代码 规范 要 求 高 的 工程 师 和 JS 框架 的 开发 者 ， 熟 悉 JSDoc 
是 必需 的 技能 。</p> 
14 </body> 


15 </html> 
一 = = - 
/ D weare Some 
© OO We///F/WER 20140505 巴 2/ 和 于 本 且 亚当 /ngw he 17 .2 2 7htn 其 说 于 
JSDoc+ 规 范 


介绍 


久 写 5Doc 晨 为 了 志 强 (到 的 可 读 性 ,及 方 侧 内 出 API 文 现 ， 它 的 频 范 可 参考 JSDoc 3 对 于 代 确 规 
区 要 求 交工 程 矣 和 有 5 竹 革 的 天 且 许 ， 夫 三 5Do< 旺 作 居 的 技 蓄 . 











图 13-10 HTMLS5 页 面 元 素 hgroup 应 用 


13.3.2 figure 标记 与 figcaption 标记 


figure 标记 用 于 对 元 素 进行 组 合 ， 常 用 于 图 像 与 图 像 描述 组 合 。figcaption〈 图 题 ) 标 
记 用 于 定义 figure 元 素 的 标题 (caption)， 可 以 给 一 组 图 像 标 记 定 义 标 题 ， 但 figcaption 标 
记 不 是 必需 的 。 如 果 包 含 了 figcaption 元 素 , 那么 它 必 须 放 置 在 figure 元 素 的 第 一 个 或 最 后 
一 个 子 元 素 的 位 置 上 。 

【 例 13-3-2】figure 与 figcaption 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-11 所 示 。 
[DA 





= 13 3 2.hEml ==> 
2 <!doctype html> 
3 <html lang="en"> 
<head> Cs 
<meta charset="UTF-8"> 视频 讲解 
<title>HTML5 页 面 元 素 figure 与 figcaption 标 记 的 应 用 </title> 
</head> 
<body> 
<figure> 


co ~a wm 心 


10 <p>HTML5 具 有 语义 、 离 线 与 存储 、 设 备 访问 等 八 个 新 特性 ， 其 对 应 的 logo 如 下 
图 所 示 : </p> 


3 <img src="class-header-semantics.jpg" width="150px" alt=" 语 
Tit "证 区 ”全 

2 <img src="class-header-offline.jpg" width="150px" alt=" 离 线 & 
存储 "title=" 离 线 & 存 储 "” /> 

13 <img src="class-header-device.jpg"” width="150px" alt=" 设 备 访 
问 "” title=" 设 备 访问 "” /> 

14 <figcaption >HTML5 新 1ogo (图 题 ) </figcaption> 

5 </figure> 

16 </body> 

17 </html> 

[mms 和 own x Ce 
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HTMLSglogo( 醒 星 ) 

















图 13-11 HTMLS5 页 面 元 素 figure 与 figcaption 应 用 


13.3.3 mark 标记 与 time 标记 


记号 mark 标记 用 来 定义 带 有 记号 的 文本 。 在 需要 突出 显示 文本 时 可 以 使 用 mark 标记 。 
此 标记 对 关键 字 做 高 亮 处 理 〈 黄 底 色 标 注 )， 突 出 显示 ， 标 注重 点 ， 在 搜索 方面 可 以 应 用 。 
时 间 time 标记 用 来 定义 公历 的 时 间 (24 小 时 制 ) 或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。 
该 标记 能 够 以 机 器 可 读 的 方式 对 日 期 和 时 间 进 行 编码 。 该 标记 不 会 在 任何 浏览 器 中 呈现 任 
何 特殊 效果 。 
1. 基本 语法 


<mark> 重 点 标注 的 内 容 </mark> 


<time>9:00</time> <!-- 定义 时 间 --> 
<time datetime="2017-05-01" pubdate="pubdate"> 国 际 劳动 节 </time> <! 一 定义 日 期 --> 
2. 属性 说 明 


time 标记 的 pubdate 属性 : 指示 该 标记 中 的 日 期 /时 间 是 文档 (或 最 近 的 article 标记 ) 
的 发 布 日 期 。 

time 标记 的 datetime 属性 : 规定 日 期 /时 间 。 和 否则 ， 由 元 素 的 内 容 给 定 日 期 /时 间 。 

【 例 13-3-3】mark 和 time 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-12 所 示 。 


== 13 3 3.hEal ==> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> a 
与 <meta charset="UTF-8"> 视频 讲解 

6 <title>HTML5 页 面 元 素 mark 和 time 标 记 的 应 用 </title> 

<script type="text/javascript" src="html5shiv.js"></script> 第 
8 </head> 

9 <body> 13 
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10 <article> 

11 <header> 

12 <h1> 五 一 国际 劳动 节 </h1> 

13 </header> 

14 <p style="text-indent:2em; "> 国际 劳动 节 又 称 "<mark> 五 一 国际 劳动 节 


</mark>"、"<mark> 国 际 示 威 游行 日 </mark>" (International Workers' Day 或 者 May Day)， 
是 世界 上 80 多 个 国家 的 全 国 性 节日 。 定 在 每 年 的 五 月 一 日 。 它 是 全 世界 劳动 人 民 共同 拥有 的 节日 。1889 
年 7 月 ， 由 恩格斯 领导 的 第 二 国际 在 巴黎 举行 代表 大 会 。 会 议 通 过 决议 ， 规 定 <time 
datetime="1890-05-01">1890-05-01</time> 国 际 劳动 者 举行 游行 ， 并 决定 把 5 月 1 日 这 一 天 定 为 
际 劳动 节 。 中 央 人 民政 府 政务 院 于 1949 年 12 月 作出 决定 ， 将 5 月 1 日 确定 为 劳动 节 。1989 年 后 ， 国 务 
院 基 本 上 每 5 年 表彰 一 次 全 国 劳动 模范 和 先进 工作 者 ， 每 次 表彰 3000 人 左右 。</p> 














Es </article> 
16 </body> 
17 </html> 








又 称 ' 五 一 国际 劳动 节 ”、“ 国 奈 示 三 游行 日 ( Internatianal Workers Day 或 者 May Day ), 时 世界 上 80 信 个 国家 的 全 国 性 
一 日 ， 它 是 全 世界 劳动 人 民 共同 捐 有 的 节日 。1889 年 7 月 ， 由 轧 格 斯 领 导 的 第 二 国 奈 在 已 和 大 会 会议 通过 决 
动 者 举行 游行 ， 刘 关 产 5 月 1 日 这 天 证 为 国 了 地， Nar 将 5 月 1 日 确 





图 13-12 HTMLS5 页 面 元 素 mark 与 time 应 用 


13.3.4 details 标记 与 summary 标记 


细节 details 标记 是 一 个 开关 式 、 交 互 式 控 件 ， 用 来 定义 用 户 可 见 的 或 者 隐藏 的 需求 补 
充 细节 ， 任 何 形式 的 内 容 都 能 被 放 在 该 标记 中 。 该 元 素 的 内 容 对 用 户 是 不 可 见 的 ， 除 非 设 
置 了 open 属性 。 与 摘要 summary 标记 配合 使 用 可 以 为 details 定义 标题 ，summary 元 素 应 
该 是 details 元 素 的 第 一 个 子 元 素 。 标 题 是 可 见 的 ， 用 户 单 击 标题 时 ， 会 显示 出 details。 只 
有 Chrome、Safari 6 以 上 支持 summary 标记 。 

基本 语法 

<details open> 


<summary> details 的 标题 </summary> 


details 的 详细 内 容 


</details> 


【 例 13-3-4】details 和 summary 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-13 所 示 。 


1 <t== du 13 3 4.html ==> 时 号 
2 <!doctype html> 加 

3 <html lang="en"> 器 

4 <head> 、 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title>HTML5 页 面 元 素 details 和 summary 标 记 的 应 用 </title> 

7 <script type="text/javascript" src="html5shiv.js"></script> 

8 </head> 

入 <body> 

10 <details> 

六 于 <summary>HTML5 是 下 一 代 的 HTML。</summary> 

Ee <h3> 什 么 是 HTML5? </h3> 


13 <p>HTML5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。</p> 


14 <p>HTML 的 上 一 个 版 本 诞生 于 1999 年 。 自 从 那 以 后 ，Web 世 界 已 经 经 历 了 巨变 。</p> 


15 <p> 大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 支 持 。</p> 

16 </details> 

17 <p><strong><mark> 注 意 : </mark></strong> 目 前 ， 只 有 Chrome 和 Safari 6 
支持 details 标 签 。</p> 

18 </body> 

19 </html> 
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图 13-13 HTMLS5 页 面 元 素 details 与 sammary 应 用 


13.3.5 progress 标记 与 meter 标记 


进度 progress 标记 用 来 定义 运行 中 的 任务 进度 (进程 )。 该 标记 有 两 个 属性 : max 表示 
规定 需要 完成 的 值 ，value 规定 进程 的 当前 值 。 

度量 meter 标记 定义 已 知 范围 或 分 数值 内 的 标量 测量 ， 也 被 称 为 gauge (尺度 )。 如 本 
盘 用 量 、CPU 使 用 率 等 ，meter 标记 属性 如 表 13-4 所 示 。 


表 13-4 meter 标记 的 属性 、 值 及 说 明 


属性 说 有明 
form 规定 meter 元 素 所 属 的 表单 





high number 规定 被 界定 为 高 值 的 范围 

low 规定 被 界定 为 低 值 的 范围 
max number 规定 范围 的 最 大 值 

min 规定 范围 的 最 小 值 
optimum number 规定 度量 的 最 优 值 

value number 必需 。 规 定 度量 的 当前 值 


【 例 13-3-$】progress 和 meter 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-14 所 示 。 


1 <== da 13 3 5.html ==> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 3 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title>HTML5 页 面 元 素 progress 和 meter 标 记 的 应 用 </title> 
党 <script type="text/javascript" src="html5shiv.js"></script> 
8 </head> 
9 <body> 
10 <p><strong> 文 件 下 载 进度 : </strong> 
于 <progress value="22" max="100"> 设 置 属性 </progress></p> 
12 <p><strong> 空 进度 条 : </strong><progress> 未 设置 属性 </progress></p> 第 
F <p><strong> 服 务 器 CPU 使 用 情况 : </strong> 
14 <meter value="0.3" high="0.9" low="0.1" optimum="0.5">3/10</meter> </p> 13 
章 
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于 5 <p><strong> 内 存 使 用 情况 : </strong><meter value="0.6" max="1" min="0" 
optimum=".75" >60%</meter></p> 

16 <p><mark> 注 释 : </mark>IE9 以 及 更 早 的 版 本 不 支持 progress、meter 标记 。</p> 

yh </body> 

18 </html> 
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注 种 : 1E9 以 及 更 早 的 版 本 不 支持 progress、meter 标记 





图 13-14 HTML5 页 面 元 素 progress 与 meter 应 用 


IE9 或 者 更 早 版 本 的 正 浏览 器 不 支持 progress、meter 标记 。 在 需要 显示 工作 任务 的 进 
度 时 ， 通 常 将 JavaScript 脚本 与 progress 标记 结合 起 来 使 用 。 


13.3.6 input 标记 与 datalist 标记 


input 标记 用 于 搜集 用 户 信息 。 详 细 介绍 请 参见 第 12 章 ， 此 处 仅 介 绍 通过 input 标记 的 
list 属性 与 datalist 标记 的 id 属性 进行 关联 ， 即 将 此 两 个 属性 的 值 设置 为 相同 的 值 ， 通 过 
datalist 标记 列 出 所 有 合法 的 输入 值 列 表 。 

选项 列表 datalist 标记 用 来 定义 input 标记 可 能 的 选项 列表 。 一 般 与 input 标记 配合 使 
用 ， 主 要 用 来 定义 input 可 能 的 值 ， 提 供 “ 自动 完 成 ”的 功能 ， 方 便 用 户 输入 。datalist 标 
记 及 其 选项 不 会 被 显示 出 来 ， 只 有 当 用 户 鼠 标 盘 旋 在 input 标记 域 时 ， 才 能 看 到 “有 ”， 然 
后 单 击 “ 环 ”弹出 一 个 下 拉 列 表 ， 提 供用 户 选择 作为 用 户 的 输入 数据 。 

【 例 13-3-6】input 和 datalist 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-15 所 示 。 


1 <I> edu 13 3. 6.hbml ==> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

每 <meta charset="UTF-8"> 

6 <title>HTML5 页 面 元 素 ijnput 和 datalist 标 记 的 应 用 </title> 
7 <script type="text/javascript" src="html5shiv.min.js"></script> 
8 </head> 

3 <body> 

10 <input list="courese"” placeholder=" 请 选择 课程 "” /> 
EE <datalist id="courese"> 

2 <option value="HTML5 移 动 应 用 开发 "> 

这 

14 

15 

16 

Ey 








<option value=" .NET 应 用 开发 "> 
<option value="JavaEE 应 用 开发 "> 
<option value="PHP+MySQL 应 用 开发 "> 
</datalist> 
<p><mark> 注 释 : </mark> 除 了 IE9 和 更 早 版 本 的 IE 浏览 器 以 及 Safari 不 支持 
datalist 标 记 ， 其 余 均 支持 。</p> 
18 </body> 
19 </html> 
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图 13-15 HTMLS5 页 面 元 素 input 与 datalist 应 用 


除了 IE9 和 更 早 版 本 的 正 浏览 器 以 及 Safari 不 支持 datalist 标记 ， 其 余 均 支持 。 
还 有 其 他 一 些 页 面 元 素 ， 如 menu、ruby、rt、mp、output 等 ， 可 以 参见 表 13-2， 此 处 
不 再 一 一 介绍 。 


13.4 HTMLS 表单 


表单 是 HTML 中 获取 用 户 输入 的 手段 ，HTMLS5 对 表单 系统 做 了 彻底 的 改造 ， 以 适应 
当前 的 应 用 。 在 HIMLS 中 增加 了 从 用 户 收集 特定 类 型 数据 的 新 方法 和 在 浏览 器 中 检查 数 
据 的 能 力 ， 但 在 使 用 有 些 新 增 特性 前 最 好 先 检查 一 下 浏览 器 的 支持 情况 。 下 面 从 表单 新 增 
属性 、 表 单 新 增 元 素 及 表单 新 增 类 型 等 方面 分 别 进行 介绍 。 


13.4.1 HTMLS 新 增 的 表单 属性 


HTML5 给 form 标记 新 增 了 一 些 属性 。 这 些 属性 是 autocomplete、novalidate。 

1. form 标记 的 新 属性 

1) autocomplete 属性 

autocomplete: onloff。 属 性 规定 form 标记 或 类 型 为 text、 search、 url、 telephone、email、 
password、date pickers、range、color 的 input 标记 是 否 具 有 自动 完成 的 功能 。 当 表单 元 素 
设置 了 自动 完成 功能 后 ， 会 记录 用 户 输入 过 的 内 容 ， 双 击 表单 元 素 会 显示 历史 输入 。 

2) novalidate 属 性 

novalidate: truelfalse。 属 性 规定 在 提交 表单 时 不 进行 验证 form 或 类 型 为 text、search、 
url、telephone、email、password、date pickers、range、color 的 input 标记 。 

【 例 13-4-1】 表 单 属性 autocomplete 和 novalidate 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 
13-16 所 示 。 赋 值 方法 : novalidate="novalidate" 或 novalidate="true"。 国光 有 加 

1 <!-- edu 13 4 1.html --> 


2 <!doctype html> 


3 <html 1 ="en"> > 
Ee 9 视频 讲解 







4 

L <meta charset="UTF-8"> 

6 <title>HTML5 表 单 form 的 autocomplete 和 novalidate 属 性 的 应 用 </title> 

学 <script type="text/javascript" src="html5shiv.min.js"></script> 
8 </head> 

全 <body> 

10 <form action="" method="get" novalidate="novalidate" autocomplete="on"> 
11 <fieldset> 

12 <legend align="center"> 个 人 基本 信 Segond> 

了 姓名 :<input type="text" name="name" /><br/> 
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14 邮箱 : <input type="email" name="email" autocomplete="off" /><br/> 
15 <input type="submit" value=" 提 交 " /> 

16 </fieldset> 

17 </form> 

18 <p> 请 填写 并 提交 此 表单 ， 然 后 重 载 页 面 ， 来 查看 自动 完成 功能 是 如 何 工作 的 。</p> 
19 <p> 请 注意 ， 表 单 的 自动 完成 功能 是 打开 的 ， 而 e-mail 域 是 关闭 的 。</p> 

20 </body> 

21 </html> 
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测 注 章 ， 天 凶 的 自动 克成 功能 多 站 开 的 而 e-mail 域 生 关闭 的 于 瑚 注音 ， 更 单 的 自动 充 成 功能 是 打开 的 ， 而 e-mail 城 是 关 何 的， 








图 13-16 HTMLS5 表单 form 的 autocomplete 与 novalidate 属性 的 应 用 


2. input 标记 的 新 属性 

HTMLS5 给 input 标记 新 增 一 些 属性 。 这 些 属性 是 autocomplete、autofocus、form、 form 
overrides(formaction、 formenctype、 formmethod, formnovalidate、 formtarget)、 height、 width、 
list、 min、max、step、multiple、pattem(regexp)、placeholder、required。 

。 height 和 width 属性 。 

height 和 width 属性 规定 只 适用 于 image 类 型 的 input 标记 的 图 像 高 度 和 宽度 。 


。 form 属性 。 
form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。form 属性 必须 引用 所 属 表 单 的 id。 
。 list 属性 。 


list 属性 规定 输入 域 的 datalist。datalist 标记 是 输入 域 的 选项 列表 。list 属性 适用 于 类 型 
为 text、search、url、telephone、email、password、date pickers、range、color 的 input 标记 。 

。 placeholder 属性 。 

placeholder 属性 提供 一 种 提示 ， 描 述 输 入 域 所 期 待 的 值 。 当 用 户 将 鼠标 盘旋 在 该 域 上 
时 ， 单 击 “ 甩 ”会 弹出 下 拉 列 表 选 项 ， 简 短 的 提示 在 用 户 输入 值 前 会 显示 在 输入 域 上 。 方 
便 用 户 快速 选择 输入 。 该 属性 支持 类 型 为 text、search、url、telephone、email、password 
的 input 标记 。 

。 autofocus 属性 。 

autofocus 属性 规定 在 页 面 加载 时 ， 该 域 自动 地 获得 焦点 。 该 属性 适用 于 所 有 input 标 
记 的 类 型 。 属 性 设置 方法 为 autofocus="autofocus" 或 直接 使 用 该 属性 autofocus。 

【 例 13-4-2】input 标记 的 新 增 部 分 属性 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-17 所 示 。 


1 <- edu 13 4 2.html -=-> 

2 <!doctype html> 

3 <html lang="en"> 了 
<head> 回 





4 二 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title>HTML5 的 ijnput 标 记 新 增 部 分 属性 的 应 用 </title> 

7 <script type="text/javascript" src="html5shiv.js"></script> 

8 </head> 


入 <body> 


10 <fieldset style="text-align:center;border:1lpx solid red;"> 

11 <legend align="center"> 用 户 登 录 </legend> 

12 <form name="myform" action="" method="get"> 

13 姓名 : <input type="text" name="name" placeholder=" 请 输入 姓 
名 " autofocus="autofocus" /> 

14 班级 : <input type="text" name="class" placeholder=" 请 输入 
班级 " list="class list"/> 

15 <datalist id="class list"> 

16 <option value="15 计 算 机 1 班 "> 

El <option value="15 软 件 工程 "> 

18 <option value="15 信 息 管理 与 信息 系统 "> 

19 <option value="15 电 子 信息 工程 "> 

20 </datalist> 

21 <input type="image" src="eg submit.jpg" width="35" height= 
a 

22 </form> 

23 <p> 下 面 的 输入 域 在 form 元 素 之 外 ， 但 仍然 是 表单 的 一 部 分 。</p> 

24 密码 <input type="password" name="user key" form="myform"> 

25 </fieldset> 

26 </body> 

27 </html> 
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图 13-17 input 标记 的 新 增 部 分 的 应 用 


。 required 属性 。 

required 属性 规定 必须 在 提交 之 前 填写 输入 域 〈 不 能 为 空 )。required 属性 适用 于 类 型 
为 text、search、url、 telephone、email、password、date pickers、number、checkbox 、radio、 
file 的 input 标记 。 属 性 设置 方法 为 required="required" 或 直接 使 用 该 属性 required。 

。 min、max 和 step 属性 。 

min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 mput 类 型 规定 限定 (约束 )。 其 中 max 
属性 规定 输入 域 所 允许 的 最 大 值 。min 属性 规定 输入 域 所 允许 的 最 小 值 。step 属性 为 输入 
域 规定 合法 的 数字 间隔 ， 例 如 step="5"， 则 合法 的 数 是 -5、0、5、10 等 。 该 组 属性 适用 类 
型 为 date pickers、number、range 的 input 标记 。 

。 multiple 属性 。 

multiple 属性 规定 输入 域 中 可 选择 多 个 值 。 适 用 于 类 型 为 email、file 的 input 标记 。 

。 form overrides 表单 重 写 属性 。 

表单 重 写 属性 〈form override attributes) 允许 重 写 form 元 素 的 某 些 属性 设 定 。 这 些 重 
写 属性 分 别 是 重 写 表单 的 action 属性 formaction、 重 写 表单 的 enctype 属性 formenctype、 重 
写 表单 的 method 属性 formmethod、 重 写 表单 的 novalidate 属性 formnovalidate、 重 写 表单 
的 target 属性 formtarget。 表 单 重 写 属性 适用 于 类 型 为 submit 和 image 的 input 标记 。 
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。 patterm 属性 。 
pattern 属性 规定 用 于 验证 input 域 的 模式 (pattem )。pattem 属性 适用 于 类 型 为 text、 
search、url、tel、email、password 的 input 标记 。 该 属性 值 是 正则 表达 式 。 


13-22 所 示 。 


1 <!-- edu 13 4 3.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

和 <meta charset="UTF-8"> 

6 <title>HTML5 的 ijnput 标 记 新 增 部 分 属性 的 应 用 </title> 

入 <script type="text/javascript" src="html5shiv.js"></script> 

8 </head> 

9 <body> 

10 <form action="" method="get"> 

11 <fieldset style="text-align:center;padding:20px;"> 

这 <legend align="center"> 理 财 认 购 信息 </legend> 

13 用 户 名 称 <input type="text" name="usrname" required><!-- 不 能 
为 空 --> 

14 认购 金额 : <input type="number" name="money" min="5" max="100" 
step="5"/> 

15 手机 号 码 : <input type="text" name="phone" pattern="1[3141518] 
[0-9] [0-9] {8}$" title=" 手 机 号 人 码 是 11 位 数字 " required /><br/><br/><!-- 不 能 为 空 且 必须 
为 11 位 数字 --> 

16 <label> 相 片 : </label><input type="file" multiple="multiple"/><!-- 支 
持 多 选 ”--> 

7 <input type="submit" formaction="admin.asp” value=" 以 管理 员 
身份 提交 " /><!-- 重 写 action --> 

18 <input type="submit" formnovalidate="true"” value=" 不 要 求 验 
证 提交 " /><!-- 重 写 novalidate --> 

19 <input type="submit" value=" 提 交 " /> 

20 </fieldset> 

21 </form> 

22 </body> 

23 </html> 
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图 13-18 ”新 增 表单 其 他 属性 应 用 初始 页 面 图 13-19 未 输入 用 户 名 称 直接 提交 后 的 页 面 
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图 13-20 number 型 input 标记 的 属性 应 用 13-21 设置 pattern 属性 后 验证 信息 
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理财 认购 信息 : 








用 户 名 称 续 为 之 认购 金额 20 手机 号 码 : 13799999999 


相片 : [ 沈 综 六 件 3 个 文件 以 管理 员 身 份 提交 | | 不 要 求 验证 提交 | 提交 

















图 13-22 给 fie 类 型 的 input 标记 设置 multiple 属性 支持 多 选 


13.4.2 HTMLS 新 增 的 表单 元 素 


HTML5 新 增 output、keygen、datalist 等 表单 元 素 ， 其 功能 描述 如 表 13-5 所 示 。 
表 13-5 HIMLS 新 增 表单 元 素 





标记 名 称 标记 功能 描述 
<output></output> 定义 不 同类 型 的 输出 ， 例 如 脚本 的 输出 
<keygen></keygen> 规定 用 于 表单 的 密 钥 对 生成 器 字段 
<datalist></datalist> ”| 定义 选项 列表 。 与 input 元 素 配合 使 用 该 元 素 ， 来 定义 input 可 能 的 值 


1. output 标记 

output 标记 定义 不 同类 型 的 输出 。 该 标记 有 for、form、name 三 个 属性 。for 属性 用 于 
描述 计算 中 使 用 的 元 素 与 计算 结果 之 间 的 关系 ， 其 值 为 每 一 元 素 的 id, 多 个 id 之 间 用 空格 
分 隔 。form 属性 用 于 定义 输入 字段 所 属 的 一 个 或 多 个 表单 。name 属性 用 于 定义 对 象 的 唯 
一 名 称 〈 表 单 提交 时 使 用 )。 

【 例 13-4-4】 新 增 output 标记 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-23 所 示 。 

1 <!-- edu 13 4 4.html --> 

2 <!doctype html> 

3 <html lang="en"> 


<head> ee 
<meta charset="UTF-8"> 视频 讲解 





4 
5 
6 <title>HTML5 的 input 标 记 新 增 部 分 属性 的 应 用 </title> 
7 <script type="text/javascript" src="html5shiv.js"></script> 
8 </head> 
9 <body> 
10 <form oninput="sum.value=parseInt (numl .value) +parseInt (num?2 .value) "> 
起 0<input type="range" id="numl" value="50" min="0" max="100">100 
12 +<input type="number" id="num2" value="50"> 
13 =<output name="sum" for="numl num2"></output> 
14 </form> 
15 <p><strong> 注 意 :</strong>IFE 浏 览 器 不 支持 output 标 记 。</p> 
16 </body> 
17 </html> 


代码 中 range 类 型 的 input 标记 的 表示 范围 为 0 一 100, 当前 值 为 50。number 类 型 的 input 
标记 的 当前 值 为 50。 当 用 户 拖 动 滑 块 时 ， 右 边 的 output 标记 内 容 通过 oninput 事件 句柄 绑 


定 J 语句 sum.value=parseImt(numl.value)+parseInt(num2 .value) 来 自动 计算 并 填充 。 第 
13 
举 
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注意 : 丰 浏 星 缆 不 支持 输出 标记 . 





注意 ; 1E 浏 览 吕 不 文 持 输出 标记 . 





图 13-23 ”output 标记 的 应 用 ( 左 : 初始 时 ， 右 : 拖 动 滑 块 时 ) 


2. keygen 标记 

keygen 标记 用 来 提供 一 种 验证 用 户 的 可 靠 方法 。keygen 元 素 是 密 钥 对 生成 器 (key-pair 
generator)。 当 提交 表单 时 , 会 生成 两 个 键 : 一 个 是 私 钥 (private key), 一 个 公 钥 (public key ) 。 
私 钥 存储 于 客户 端 , 公 钥 则 被 发 送 到 服务 器 。 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 (client 
certificate)。 目 前 ， 浏 览 器 对 此 元 素 的 糟糕 的 支持 度 不 足以 使 其 成 为 一 种 有 用 的 安全 标准 。 

【 例 13-4-$】 新 增 keygen 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-24 所 示 。 


1 <!-- edu 13 4 5.html --> 
2 <!DOCTYPE htmI> 


3 <html> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title>keygen 标 记 的 应 用 </title> 

是 </head> 

8 <body> 

9 <form action="" method="get"> 

10 用 户 名 : <input type="text" name="usr name" /> 
11 加 密 : <keygen name="security" /> 

12 <input type="submit" value=" 提 交 " /> 
13 </form> 

14 </body> 

15 </html> 








| 加 裤 : 医 到 | 





ene 


图 13-24 keygen 标记 的 应 用 ( 左 : 支持 ， 右 : 不 支持 ) 





3. datalist 标记 

datalist 标记 规定 了 input 标记 可 能 的 选项 列表 。datalist 标记 被 用 来 为 input 标 记 提 供 “ 自 
动 完成 ”的 特性 。 用 户 能 看 到 一 个 下 拉 列 表 ， 里 边 的 选项 是 预先 定义 好 的 ， 将 作为 用 户 的 
输入 数据 。 一 般 使 用 input 标记 的 list 属性 来 绑 定 datalist 元 素 (input 标记 的 list 属性 值 应 
该 与 datalist 标记 的 id 属性 值 相 同 )。 案 例 参 见 例 13-3-6 和 例 13-4-2。 


13.4.3 _ HTMLS 新 增 的 input 类 型 


HTMLS5 增加 很 多 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 新 
增 input 标记 的 输入 类 型 是 color、date pickers (日 期 选择 器 , 包括 date、month、week、 time、 
datetime、datetime-local )、email、number、range、search 、tel、url。 目 前 所 有 的 主流 浏览 


器 一 般 都 支持 新 的 input 类 型 ， 即 使 不 被 支持 ， 仍 可 以 显示 为 常规 的 文本 域 。 
新 增 类 型 的 使 用 方法 分 别 进行 介绍 。 

。 Input 类 型 Date Pickers (日 期 选择 器 )。 

HTMLS5 提供 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 : 

(1) date 一 一 选取 日 、 月 、 年 。 

(2) month 一 一 选取 月 、 年 。 

(3) week 选取 周 和 年 。 

(4) time 一 一 选取 时 间 〈 小 时 和 分 钟 )。 

(5) datetime 一 一 选取 时 间 、 日 、 月 、 年 (UTC 时 间 )。 

(6) datetime-local 一 一 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 








以 下 对 这 些 


【 例 13-4-6】 表 单 日 期 选择 器 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-25 所 示 。 


国 人 回 
1 <!-- edu 13 4 6.html --> 
2 <!DOCTYPE html> 入 
3 <html> [ODS 
4 <head> . 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 表 单 新 增 input 类 型 的 应 用 </title> 
</head> 
8 <body> 
9 <fieldset> 
10 <legend align="center"> 新 生 报到 须知 </legend> 
EE 开学 日 期 : <input type="date" /><br /> 
12 开学 起 始 周 : <input type="week" name="user date" /><br /> 
13 开始 起 始 月 : <input type="month" name="user date" /><br /> 
14 交 费 时 间 : <input type="time" name="user date" /><br /> 
EH 日 期 与 时 间 : <input type="datetime" name="user date" /><br /> 
16 本 地 日 期 与 时 间 : <input type="datetime-local" name="user date" /><br /> 
17 <input type="submit" value=" 提 交 " /> 
18 <input type="reset" /> 
19 </fieldset> 
20 </body> 
21 </html> 


当 鼠 标 盘旋 在 datetime 类 型 的 文本 框 时 ,不 会 出 现任 何 按钮 。 当 鼠标 盘旋 在 time 类 型 
的 文本 框 上 时 ,会 出 现 微调 按钮 。 当 鼠标 盘旋 在 其 余 类 型 均 文本 框 时 , 会 出 现 组 合 按钮 ;vw|” 
(微调 + 下 三 角 )， 单 击 “ 甩 ”按钮 以 弹出 日 期 选择 器 ， 进 行 相关 选择 设置 ， 也 可 以 利用 上 、 


下 微调 按钮 分 别 进行 年 、 月 、 日 、 时 、 分 等 单项 设置 。 
= 
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图 13-25 input 标记 的 日 期 选择 器 的 应 用 〈 左 :初始 盘旋 时 ， 右 : 设置 完成 时 ) 于 





HTML5 故 动 与 CSS3 应 局 


Web 页 带 玫 医 磁 大 一 一 HTML5、CSS3、JavaScript ( 筑 3 族 ) 





® input 类 型 : color。 
从 取 色 器 拾取 颜色 --> 


<input type="color" name="favcolor"> <!—— 


。 input 类 型 : tel。 
定义 输入 电话 号 码 字 段 。 


<input type="tel" name="usrtel"> 


e input 类 型 : email。 
email 类 型 用 于 包含 e-mail 地 址 的 输入 域 。 在 提交 表单 时 , 会 自动 验证 email 域 的 值 是 
否 合法 有 效 。 


<input type="email" name="useremail"> <!-—— 


自动 验证 邮箱 格式 --> 

。 input 类 型 : number。 

number 类 型 用 于 包含 数值 的 输入 域 。 此 类 型 的 input 标记 常用 属性 如 表 13-6 所 示 。 
<input type="number" 


name="mynumber" min="0" max="100"> 


表 13-6 number 类 型 input 标记 的 属性 及 说 明 





属 性 说 明 
disabled 规定 输入 字段 是 禁用 的 
max 规定 允许 的 最 大 值 
maxlength 规定 输入 字段 的 最 大 字符 长 度 
min 规定 允许 的 最 小 值 
pattern 规定 用 于 验证 输入 字段 的 模式 
readonly 规定 输入 字段 的 值 无 法 修改 〈 只 读 ) 
required 规定 输入 字段 的 值 是 必需 的 
size 规定 输入 字段 中 的 可 见 字符 数 
step 规定 输入 字段 的 合法 数字 间隔 
value 规定 输入 字段 的 默认 值 


。 input 类 型 : range。 


range 类 型 用 于 包含 一 定 范围 内 数字 值 的 输入 域 。range 类 型 显示 为 滑动 条 。 


<input type="range" name="money" min="1" max="1000" step="5"> 


。 input 类 型 :search。 


search 类 型 用 于 搜索 域 ， 例 如 站 点 搜索 或 Google 搜索 。 


一 mr 


<input type="search" name="websidesearch"> 


® input 类 型 : url。 


url 类 型 用 于 包含 URL 地 址 的 输入 域 。 在 提交 表单 时 ， 会 自动 验证 url 域 的 值 。 


<input type="url" name="homepage"> 


【 例 13-4-7】 其 他 新 增 input 类 型 综合 应 用 。 代码 如 下 , 页 面 效 果 如 图 13-26 


和 图 13-27 所 示 。 
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视频 讲解 


























图 13-26 新 增 其 他 input 类 型 初始 页 面 图 13-27 “颜色 ”对 话 框 界面 


1 <!-- edu 13 4 7.html --> 
2 <!DOCTYPE htmI> 





3 <html> 
4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 表 单 新 增 input 类 型 的 应 用 </title> 
7 <script type="text/javascript" src="html5shiv.min.js"></script> 
8 </head> 
9 <body> 
10 <fieldset style="width:500px;height:200px;padding:20px 50px;"> 
11 <legend align="center"> 新 增 其 他 input 类 型 </legend> 
12 <form method="post" action=""> 
13 设置 颜色 : <input type="text" name="colorl" id="colorl" readonly> 
14 <input type="color" name="color2" oninput="colorl. value= 
color2.value"><br> 
35 输入 邮箱 : <input type="email" name="useremail"><br> 
16 站 内 搜索 : <input type="search" name="insidesearch"><br> 
3 电话 号 码 : <input type="tel" name="usrtel"><br> 
18 个 人 主页 : <input type="url" name="homepage"><br> 
19 年 龄 : <input type="range" name="age" min="1" max="120" oninput= 
"age_num.value=age.value"><output name="age num" for="age"></output><br> 
20 期 望 薪酬 : <input type="number" name="quantity" min="2500" 
max="10000" step="100" value="2500"><br> 
2 <input type="submit" value=" 提 交 " /> 
2 <input type="reset" /> 
2Z3 </form> 
24 </fieldset> 
25 </body> 
26 </html> 


在 图 13-26 中 单 击 color 类 型 文本 域 ， 弹 出 “颜色 ”对 话 框 ， 如 图 13-27 所 示 。 单 击 某 
一 颜色 区 域 后 ， 再 单 击 “ 确 定 ” 按 钮 ， 将 六 位 十 六 进 制 颜色 填充 到 左边 的 文本 框 中 。 由 于 
定义 邮箱 为 email 类 型 ， 会 自动 验证 ， 所 以 当 用 户 输入 的 邮箱 不 包含 @、. 等 字符 时 会 弹出 
验证 信息 , 如 图 13-28 所 示 。 当 用 户 在 个 人 主页 对 应 的 url 类 型 的 文本 域 中 输入 信息 不 正确 
时 ， 会 弹出 验证 信息 ， 如 图 13-29 所 示 。 


Er 
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图 13-28 email 类 型 文本 域 验证 页 面 图 13-29 ”url 类 型 文本 域 验证 页 面 





HTML5 洽 础 与 CSS3 应 局 
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当 用 户 拖 动 年 龄 滑动 条 时 ， 会 将 滑动 条 的 当前 值 填 充 到 右边 的 output 标记 内 。 如 图 
13-30 所 示 。 当 用 户 设置 期 望 薪酬 时 ,通过 单 击 微调 按钮 来 递增 或 递减 薪酬 标准 ,设置 min 
为 2500，max 为 10000，step 为 100， 所 以 此 域 中 初始 值 为 2500， 单 击 微调 按钮 每 次 自动 












































递增 或 递减 100， 如 图 13-31 所 示 。 
rr Ed 
| @ [D177 0030 ed 47h)_herl9531895992 久 办 | | [3 © [O17onyem ens 7 mmo SH0s50 a] 
ee pn 
Poomo = RE : PO ee] 
挫 入 服 福 ; 大 hu 人 6 cam 久 入 晰 福 ; 天 只 1 com 
Free en i 
en ee 
re RE 一 
天时 六 出 :300 区 msm [| 
EE EE 
图 13-30” 拖 动 年 龄 滑动 条 时 的 页 面 图 13-31 单 击 微调 按钮 时 的 页 面 


13.5 HTMLS 视频 与 音频 


大 多 数 商业 网 站 都 喜欢 采用 视频 来 宣传 自己 的 公司 或 推销 自己 的 产品 或 服务 。 然 而 在 
HTML4.01 版 本 基础 之 前 ， 只 能 通过 相关 插件 (比如 Flash) 来 播放 ， 而 且 所 有 浏览 器 不 一 
定 都 有 同样 的 插件 ， 还 需要 安装 其 他 插件 才能 实现 。HTMLS5 提供 了 video 标记 和 audio 标 
记 ， 很 好 地 解决 这 一 问题 。 

13.5.1 video 标记 及 属性 


HTMLS5 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 。Video 标记 支持 三 种 视频 
格式 ， 分 别 为 MP4、WebM、Ogg。 其 格式 的 说 明 如 下 : 

。 Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

。 MPEG4: 带 有 H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 

。 WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 

。 Video 标记 提供 了 播放 、 和 暂停 和 音量 控件 来 控制 视频 。 

1. 基本 语法 

<video src="movie.ogg" width="320" height="240" controls="controls"> 

您 的 浏览 器 不 支持 video 标 记 。 

</video> 

2. 属性 说 明 

width 和 height 属性 : 控制 视频 的 尺寸 。 使 用 时 需要 设置 视频 的 高 度 和 宽度 ， 便 于 视 
频 播 放 。 如 果 不 设置 宽度 和 高 度 ， 页 面 就 会 根据 原始 视频 的 大 小 而 改变 。 

src 属性 : 规定 要 播放 的 视频 的 url。 

controls 属性 : 设置 该 属性 ， 则 页 面 上 会 显示 播放 控件 。 浏览 器 控件 应 该 包括 播放 、 和 暂 
停 、 定 位 、 音 量 、 全 屏 切 换 、 字 幕 (如果 可 用 )、 音 轨 〈( 如 果 可 用 )。 

autoplay 属性 : 设置 该 属性 ， 则 视频 就 绪 后 马上 播放 。 设 置 方 法 : autoplay="autoplay " 
或 autoplay。 





loop: 设置 该 属性 ， 则 当 媒 体 文件 完成 播放 后 再 次 开始 播放 。 

preload: 设置 该 属性 , 则 视频 在 页 面 加 载 时 进行 加 载 , 并 预备 播放 。 如 果 使 用 autoplay， 
则 忽略 该 属性 。 该 属性 有 三 种 值 : auto〈 一 旦 页 面 加 载 ， 则 开始 加 载 音 频 /视频 )、metadata 
( 当 页 面 加 载 后 仅 加 载 音频 /视频 的 元 数据 )、none (页面 加 载 后 不 应 加 载 音频 /视频 )。 格 式 
如 下 : 


<video preload="autolmetadatalnone"> 


poster 属性 : 用 于 在 视频 下 载 时 显示 的 图 像 (海报 图 片 )， 或 者 在 用 户 点 击 播放 按钮 前 
显示 的 图 像 。 如 果 未 设置 该 属性 ， 则 使 用 视频 的 第 一 帧 来 代替 。 赋 值 方法 : poster="url"。 

如 果 浏 览 器 不 支持 video 标记 ， 就 在 <video> 与 </video> 标 记 之 间 插 入 相关 提示 信息 。 

Video 标记 支持 多 个 source 标记 。 可 以 使 用 source 标记 为 video 标记 和 audio 标记 提供 
多 个 不 同 的 音频 、 视 频 文件 ， 以 解决 浏览 器 支持 。 如 果 浏 览 器 支持 将 使 用 第 一 个 可 识别 的 
格式 。IE8 或 者 更 早 的 下 版 本 不 支持 video 标记 。 使 用 语法 如 下 所 示 。 

<video width="320" height="240" controls="controls"> 

<source src="movie.ogg" type="video/ogg"> 


<source src="movie.mp4" type="video/mp4"> 


您 的 浏览 器 不 支持 video 标 记 。 









</video> 

【 例 13-5-1】video 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-32 和 图 13-33 所 示 。 
Ee ed 13 5 1hEnl==> 
2 <!DOCTYPE html> 总 站 
3 <html> 加 Se 
4 <head> 视频 讲解 
向 <meta charset="UTF-8"> 
6 <title> 视 频 标记 的 应 用 </title> 

7 </head> 
8 <body> 
9 <fieldset style="text-align:center;float:left;"> 

10 <legend>src 属 性 提供 视频 文件 </legend> 

3 <video src="movie.ogg"” poster="url" loop autoplay width="320" 

height="240" controls="controls"> 

$2 您 的 浏览 器 不 支持 video 标 记 。 

13 </video> 

14 </fieldset> 

15 <fieldset style="text-align:center;float:left;"> 

16 <legend>source 标 记 提供 不 同 的 视频 文件 </legend> 

17 <video width="320" height="240" controls="controls"> 

18 <source src="movie.ogg" type="video/ogg"> 

19 <source src="movie.mp4" type="video/mp4"> 

20 您 的 浏览 器 不 支持 video 标 记 。 

2 </video> 

22 </fieldset> 

23 </body> 

24 </html> 





HTML5 故 动 与 CSS3 应 局 


Web 育 帝 开交 故 大 一 TIMTI、CSS3、JavaScript ( 筑 3 族 ) 












mc 菊 性 提供 视 晤 文件 ace 妹 记 提供 不 同 的 视频 文件 
全 的 浏览 属 不 支持 wo 标记 。。 候 的 浏览 器 不 变 持 veo 昧 这. 











图 13-32 HTMLS5 视频 播放 页 面 图 13-33 浏览 器 不 支持 视频 时 的 页 面 


13.5.2 audio 标记 及 属性 


HTML5 规定 了 一 种 通过 audio 元 素来 包含 音频 的 标准 方法 。audio 标记 能 够 播放 声音 
文件 或 者 音频 流 。 同 样 可 以 使 用 source 标记 给 audio 标记 提供 不 同 格式 的 音频 文件 ， 浏 览 
器 将 使 用 第 一 个 支持 的 音频 文件 。audio 标记 的 部 分 属性 与 video 标记 相同 , 此 处 不 再 介绍 。 
如 果 浏 览 器 不 支持 audio 标记 ， 则 显示 audio 标记 之 间 的 提示 信息 ， 如 图 13-34 所 示 。IE8 
及 更 早 正版 本 不 支持 audio 标记 。 

【 例 13-5-2】audio 标记 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-34 和 图 13-35 所 示 。 


1 <!-- edu 13 5 2.html--> 
2 <!DOCTYPE html> 








3 <html> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 音 频 标记 的 应 用 </title> 

这 <script type="text/javascript" src="html5shiv.js"></script> 
8 </head> 

9 <body> 

10 <fieldset style="text-align:center;float:left;"> 
和 <legend>src 属 性 提供 音频 文件 </legend> 

2 <audio src="horse.ogg" controls="controls"> 
23 您 的 浏览 器 不 支持 audio 标 记 (元 素 ) 。 

14 </audio> 

15 </fieldset> 

16 <fieldset style="text-align:center;float:left;"> 
<legend>source 标 记 提供 不 同 的 音频 文件 </legend> 

18 <audio controls="controls"> 

19 <source src="horse.ogg" type="audio/o0gg"> 
20 <source src="horse.mp3" type="audio/mpeg"> 
21 您 的 浏览 器 不 支持 audio 标 记 (元素) 。 
2 </audio> 
2 </fieldset> 
24 </body> 
25 </html> 
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您 的 浏览 器 不 支持 andio 标 记 (元素 】。 | 




















图 13-34 HIMLS 音频 播放 页 面 图 13-35 浏览 器 不 支持 音频 时 的 页 面 


13.6 CSS3 基础 应 用 


随 着 Web 技术 不 断 发 展 和 广泛 传播 ， 原 来 的 CSS2 标准 和 相关 技术 似乎 已 经 满足 不 了 
益 增长 的 开发 需求 。 人 们 需要 实现 更 加 美观 、 用 户 体验 更 好 的 界面 。CSS3 这 个 新 一 代 
的 标准 应 运 而 生 。 


13.6.1 CSS3 新 特性 


为 了 满足 Web UI 的 开发 需求 , 它 提供 了 一 系列 强大 的 功能 , 如 许多 新 的 CSS 属性 ( 文 
字 、 布 局 、 颜 色 等 )、 各 种 CSS 特效 、CSS 动画 、 元 素 的 变换 等 。 这 些 CSS 新 特性 可 以 说 
都 是 功能 非常 强大 和 比较 完善 的 , 用 户 只 需要 添加 几 行 简单 的 CSS 代码 便 可 以 实现 出 一 系 
列 令 人 眼前 一 亮 的 效果 ， 相 比 之 前 用 JavaScript 去 模拟 这 样 的 效果 要 好 得 多 ， 不 仅 降低 了 
复杂 度 ， 变 得 易 维 护 ， 在 性 能 上 也 突飞猛进 了 。 

CSS3 被 细 分 为 许多 “模块 ”。 CSS2 中 已 经 拆 分 成 小 块 , 又 新 增加 了 一 些 最 重要 的 CSS3 
模块 ， 分 别 为 选择 器 、 盒 模型 、 背 景 和 边框 、 文 字 特 效 、2D/3D 转换 、 动 画 、 多 列 布局 、 
用 户 界 面 。 许 多 新 的 CSS3 属性 已 在 目前 主流 的 浏览 器 中 得 到 应 用 。 本 节 主 要 详细 介绍 边 
框 、 转 换 、 过 渡 与 动画 等 CSS3 新 特性 ， 以 满足 用 户 的 学 习 与 使 用 需要 。 


13.6.2 CSS3 浏览 器 兼容 性 


1. 常用 的 浏览 器 属性 前 组 

为 了 让 CSS 样式 能 够 满足 不 同 浏览 器 版 本 的 需要 ， 充 分 发 挥 CSS3 的 魅力 ， 需 要 在 样 
式 属性 前 面 增加 一 些 区 分 不 同 浏览 器 的 前 级 。 

-Webkit-: 适用 于 webkit 核心 浏览 器 ， 包 含 Safari、Chrome 等 。 

-moz-: 适用 于 Firefox 浏览 器 等 。 

-ms-: 适用 于 下 浏览 器 。 

-0-: 适用 于 Opera 浏览 

在 实际 开发 过 程 中 ， 为 了 满足 不 同 浏览 器 对 CSS3 新 特性 的 支持 ， 需 要 写 上 类 似 如 下 
的 声明 语句 。 格 式 如 下 所 示 : 




















divt{ 
-moz-animation: myfirst 5s; /* Firefox */ 
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */ 
-o-animation: myfirst 5s; /* Opera */ 
-ms-animation: myfirst 5s; /* IE */ 
animation: myfirst 5s; /* 标准 属性 写 在 最 后 ，*/ 


2. CSS3 前 缀 解决 方案 

为 了 使 得 CSS 属性 支持 所 有 的 浏览 器 ,例如 Chrome、Firefox、IE、Opera、Safari 等 ， 
经 常 需要 添加 一 大 堆 带 有 浏览 器 特定 前 级 的 CSS 相关 代码 ， 特 别 是 CSS3 中 的 相关 属性 ， 
尤其 需要 处 理 。 为 了 简化 开发 过 程 和 相关 的 代码 元 余 问 题 ， 在 页 面 中 引入 了 -prefix-free 这 
个 类 库 ， 可 以 自动 帮助 在 CSS 中 添加 相关 的 浏览 器 特有 的 前 绥 属 性 。 

-prefix-free 是 一 个 JavaScript 工具 库 ， 用 户 再 也 不 需要 编写 带 有 浏览 器 前 级 的 CSS 代 
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码 ， 在 需要 的 时 候 ，-prefix-free 会 自动 帮助 添加 当前 浏览 器 需要 的 前 绥 。 引 用 方式 如 下 : 
<script src="http://cdn.gbtags.com/prefixfree/1.0.7/prefixfree.min.js"></script> 
<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script> 
-prefix-free 这 个 类 库 也 可 以 从 http://leaverou.github.com/prefixfree/ 网 站 上 直接 下 载 到 

本 地 ， 使 用 下 列 格式 来 引用 。 


<script src="js/prefixfree.min.js"></script> 


3. CSS 样式 重 置 方案 
由 于 不 同 的 浏览 器 定义 的 HTML 元 素 的 默认 样式 不 尽 相 同 , 导致 页 面 在 不 同 的 浏览 
中 显示 会 有 一 定 的 差异 ， 为 了 保护 所 有 浏览 器 默认 样式 而 不 是 完全 去 掉 它们 ， 推 荐 使 用 
Normalize.css 来 统一 不 同 浏览 器 下 的 样式 。 

Normalize.css 是 一 个 很 小 的 CSS 文件 ， 但 它 在 默认 的 HTML 元 素 样式 上 提供 了 跨 浏 
览 器 的 高 度 一 臻 性 。 相 比 于 传统 的 CSS reset，Normalize.css 是 一 种 现代 的 、 为 HTML5 准 
备 的 优质 替代 方案 。Normalize.css 现在 已 经 被 用 于 Twitter Bootstrap、HTMLS5 Boilerplate、 
GOVUK、Rdio、CSS Tricks 以 及 许 许 多 多 其 他 框架 、 工 具 和 网 站 上 。 

用 户 可 以 从 Github 下 载 Normalize.css， 然 后 引用 到 页 面 中 就 可 以 。 也 可 以 在 
Normalize.css 源码 的 基础 上 重新 编写 ， 在 必要 的 时 候 用 自己 写 的 CSS 罗 盖 默认 值 。 


<link rel="stylesheet" href="css/normalize.css" type="text/css"> 


13.6.3 CSS3 边框 


CSS3 之 前 ， OU 添加 阴影 、 绘 制图 形 边框 往往 需要 借助 于 类 似 
PhotoShop 这 样 的 软件 。 有 了 CSS3 后 ， 一 切 问 题 迎刃而解 。 
CSS3 具有 三 个 边框 属性 ， 如 表 13-7 所 示 。 


表 13-7 CSS3 边框 属性 及 说 明 








属 性 说 了 明 
border-image 设置 所 有 border-image-* 属 性 的 复合 属性 
border-radius 设置 所 有 四 个 border-*-radius 属性 的 复合 属性 
box-shadow 向 矩形 方 框 添加 一 个 或 多 个 阴影 

1. border-radius 圆 角 边 框 
语法 : 


border-radius: 水 平 半径 (1 一 4 个 值 ) px1s/ 垂 直 半径 (1 一 4 个 值 )px1g7 


该 属性 是 复合 属性 ， 用 于 设置 四 个 border-*-radius 属性 。 有 两 个 参数 ， 使 用 “/” 分 隔 ， 
第 一 个 参数 表示 水 平 半径 , 可 以 有 1 一 4 个 值 ; 第 二 个 参数 表示 垂直 半径 ， 也 有 1 一 4 个 值 ; 
若 不 使 用 “/”， 说 明 水 平 与 垂直 半径 相同 。 属 性 值 可 以 是 像素 ， 也 可 以 是 %。 每 个 半径 的 
四 个 值 的 顺序 是 : 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 。 如 果 省 略 左 下 角 ， 右 上 角 是 相同 的 。 
如 果 省 略 右 下 角 ， 左 上 角 是 相同 的 。 如 果 省 略 右上 角 ， 左 上 角 是 相同 的 。 圆 角 半 径 表 示 图 
如 图 13-36 所 示 。 














border-radius:2em; /* 等 同 于 下 列 4 行 定义 */ 


border-top-left-radius:2em; /* 定义 左上 角 半 径 */ 
border-top-right-radius:2em; /* 定 义 右 上 角 半 径 */ 
border-bottom-right-radius:2em; /* 定 义 右上 角 半 径 */ 
border-bottom-left-radius:2em; /* 定 义 左 下 角 半 径 */ 


例如 , 设置 border-radius:10px 20px 30px 40px; 则 说 明 四 个 圆 角 的 水 平 与 垂直 半径 各 自 
相同 ， 如 图 13-37 左 图 所 示 。 设 置 border-radius:10px 20px 30px 40px/20px 50px 30px 10px; 
则 表示 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 的 水 平 半径 分 别 为 10px、20px、30px、40px; 左 
上 角 、 右 上 角 、 右 下 角 、 左 下 角 的 垂直 半径 分 别 为 20px、50px、30px、10px， 如 图 13-37 
右 图 所 示 。 





border-radius:10px 20px border-radius;10px 20px 30px 
30px 40px 40px20px 50px 30px 10px; 
图 13-36 圆 角 的 半径 表示 图 图 13-37 不 同 圆 角 的 不 同 半径 表示 图 


【 例 13-6-1】CSS3 圆 角 边框 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-38 所 示 。 





图 13-38 CSS3 圆 角 边框 的 应 用 


1 <t== edu 13 6 1.html ==> 
2 <!doctype html> 





3 <html lang="en"> 
4 <head> 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title>CSS3 边 框 的 应 用 </title> 
7 <script type="text/javascript" src="html5shiv.js"></script> 
8 <link rel="stylesheet" href="css/normalize.css" type="text/css"> 
9 <script type="text/javascript" src="js/prefixfree.min.js"></script> 
10 <style type="text/css"> 
11 div{float:left;width:120px;height:120px;margin:50px 80px; 
background:#dadada;border:6px solid #00cc66;padding:10px; } 
12 #divi{ border-radius:25px;} 
13 #div2{ border-radius:25px 50px;} 第 
14 #div3{ border-radius:80px 100px 60px 120px/50px 60px 70px 70px;} 13 
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15 </style> 

16 </head> 

17 <body> 

18 <h3>CSS3 圆 角 边框 </h3><hr> 

Ty <div id="divi" class=""><p> 半 径 均 相同 </p></div> 

20 <div id="div2" class=""><p> 左 、 右 对 角 的 半径 相同 </p></div> 
2 <div id="div3" class=""><p> 每 个 角 水 平 与 垂直 半径 不 同 </p> 
22 </div> 

23 </body> 

24 </html> 


2. box-shadow 边框 阴影 
box-shadow 边框 阴影 是 复合 属性 ， 含 有 六 个 属性 ， 如 表 13-8 所 示 。 


表 13-8 box-shadow 属性 值 及 说 明 





值 说 明 
h-shadow 必需 。 水 平 阴 影 的 位 置 。 允 许 负 值 
Vv-shadow 必需 。 垂 直 阴 影 的 位 置 。 允 许 负 值 
blur 可 选 。 模 糊 距离 
spread 可 选 。 阴 影 的 尺寸 
color 可 选 。 阴 影 的 颜色 。 请 参阅 CSS 颜色 值 
inset 可 选 。 将 外 部 阴影 (outseb) 改 为 内 部 阴影 





该 属性 是 复合 属性 ， 可 以 设置 六 个 属性 值 ， 分 别 表示 水 平 偏 移 、 垂 直 偏 移 、 模 糊 距离 、 
阴影 尺寸 、 颜 色 、 阴 影 模式 〈 默 认 是 外 部 阴影 ， 指 定 inset 改 为 内 部 阴影 )， 其 中 阴影 不 占 


空间 。 
例如 ，box-shadow: h-shadow v-shadow blur spread color inset; 
box-shadow: 0 0 30px 20px #6699ff inset; /* 内 部 阴影 */ 
box-shadow: Opx Opx 45px 10px #9999ff; /* 外 部 阴影 */ 
box-shadow: 20px 20px 35px 15px #99ff33; /* 外 部 阴影 */ 


第 1 行 设置 了 内 部 阴影 样式 为 水 平 、 垂 直 偏 移 0px、 模 糊 距离 30px、 阴 影 尺 寸 20px、 
颜色 #6699ff。 第 2 行 设 置 外 部 阴影 样式 为 水 平 、 垂 直 偏 移 0px， 模 糊 距离 45px、 阴 影 尺寸 
10px、 颜 色 姑 999ff。 第 3 行 设置 外 部 阴影 样式 为 水 平 、 垂 直 偏 移 为 20px、 模 糊 距离 35px、 
阴影 尺寸 13px、 颜 色 为 如 9ff33 。 

【 例 13-6-2】CSS3 边框 阴影 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-39 所 示 。 


1 <!=- edu 13 6 2.htnl ==> 
2 <!doctype html> 
3 <html lang="en"> 








4 <head> 视频 讲解 

5 <meta charset="UTF-8"> 

6 <title>CSS3 边 框 的 应 用 </title> 

7 <script type="text/javascript" src="html5shiv.js"></script> 

8 <link rel="stylesheet" href="css/normalize.css" type="text/css"> 
9 <script type="text/javascript" src="js/prefixfree.min.js"></script> 
10 <style type="text/css"> 

11 div{float:left;width:120px;height:120px;margin:50px 


80px;background:#dadada;border:6px solid #00cc66;padding:10px; } 





12 #divl{ border-radius:25px;box-shadow: 0 0 30px 20px #6699ff inset;} 

13 #div2{ border-radius:25px 50px;box-shadow:O0px Opx 45px 10px #9999ff;} 

14 #div3{ border-radius:80px 100px 60px 120px/50px 60px 70px 70px; 

证 和 box-shadow: 20px 20px 35px 15px #99ff33;} 

16 </style> 

TF </head> 

18 <body> 

19 <h3>CSS3 圆 角 边 框 、 阴 影 </h3><hr> 

20 <div id="divl" class=""><p> 半 径 均 相同 , 内 部 阴影 </p></div> 

pa <div id="div2" class=""><p> 左 、 右 对 角 的 半径 相同 ， 外 部 阴影 </p></div> 

22 <div id="div3"” class=""><p> 每 个 角 水平 与 垂直 半径 不 同 ， 带 水 平 、 季 直 偏 移 
的 外 部 阴影 </p></div> 

2 </body> 

24 </html> 
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图 13-39 CSS3 边框 阴影 的 应 用 


3. border-image 边框 图 像 

通过 CSS3 的 border-image 属性 可 以 创建 带 有 图 像 的 边框 ， 
图 像 、 剪 裁 位 置 、 重 复 性 。 该 属性 有 五 个 子 属性 ， 其 说 明 如 表 13-9 所 示 。 语 法 如 下 : 

border-image:border-image-source 

border-image-slice/border-image-width/ border-image-outset border-image- repeat 

border-image: url("border.png") 27 27 27 27 fil1/27 27 27 27/27px 27px 27px 


27px repeat 
/* 剪裁 和 宽度 不 需要 单位 ， 偏 移 量 需要 单位 。fil11 表 示 可 选项 ， 指 定 中 间 第 九 块 为 非 透明 块 。*/ 


border-image-source 


表 13-9 border-image 属性 值 及 说 明 
说 ”了 明 
规定 边框 中 图 像 的 路 径 


主要 参数 有 三 个 ， 分 别 是 





border-image-slice 


规定 图 像 边 框 向 内 偏 黎 ， 可 以 是 数字 或 百分比 





border-image-width 


规定 图 像 边框 的 宽度 





border-image-outset 


规定 边框 图 像 区 域 超出 边框 的 量 





border-image-repeat 





。 border-image-source 属性 (边框 图 像 )。 
默认 无 边框 图 像 ， 如 果 设 置 边框 图 像 ， 则 使 用 绝对 或 相对 url 地 址 指定 边框 图 像 。 


border-image-source: none |url (image 文 件 ); 
border-image-source:url ("border.png"); 


规定 图 像 边 框 是 否 应 平 铺 (复制 )、 铺 满 (环绕 ) 或 拉 伸 
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。 border-image-slice 属性 (图 像 切 片 /剪裁 )。 
该 属性 规定 图 像 边框 向 内 偏 移 , 可 以 是 数字 或 百分比 。 可 以 1 一 4 个 值 , 类 似 于 padding 
属性 的 设置 方法 。 语 法 如 下 : 


border-image-slice: number |% |fill; 
border-image-slice:27 27 27 27; /* 边框 图 像 切 块 9 块 ， 每 个 角 为 27px*27px*/ 





W3C 指定 一 个 专用 位 图 ， 图 像 名 称 为 borderpng， 大 小 为 8lpxX 81px， 可 以 将 此 图 剪 
裁 成 小 方 格 为 27pxX27px 的 九宫 格 。 有 四 个 角 、 四 个 边区 域 和 一 个 中 间 部 分 ，fil 表示 可 
选项 ， 指 定 中 间 第 九 块 为 非 透明 块 ， 不 指定 说 明 中 间 第 九 块 是 透明 块 。 如 图 13-40 左 图 所 
示 。border-image-slice 的 取 值 为 百分比 或 数字 (默认 单位 是 px)， 其 中 top/bottom 相对 于 背 
景 图 的 高 ，leftright 相对 于 背景 图 的 长 。 如 图 13-40 右边 图 所 示 。 
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图 13-40 W3C 指定 的 8l1pxX8lpx 位 图 及 九宫 格 分 割 法 











。 border-image-repeat 属性 (边框 图 像 重 复 )。 
该 属性 用 于 设置 边框 图 像 的 重复 方式 。 语 法 如 下 所 示 : 


border-image-repeat: stretch | Found | repeat 


该 属性 值 有 三 种 取 值 ， 分 别 为 stretch 〈 拉 伸 )、round (环绕 )、repeat (复制 )。 默 认 值 
为 stretch。stretch 表示 拉 伸 图 像 来 填充 区 域 ，repeat 表示 直接 用 图 像 来 填充 区 域 ， 填 充 时 
图 像 可 能 有 残缺 ;round 与 repeat 效果 类 似 ， 如 果 无 法 完整 平 铺 所 有 图 像 ， 则 对 图 像 进行 
缩放 以 适应 区 域 。 

边框 将 border-image 分 成 了 九 个 区 域 , 分 别 为 四 个 角 (border-top-left-image、border-top- 
Tight-image、border-bottom-left-image、border-bottom-right-image)、 四 条 边 (border-top-image、 
border-right-image、border-bottom-image、border-left-image) 及 中 间 的 内 容 区 域 , 如 图 13-41 


所 示 。 
81px i 
x 


border:bottom:right:image 





border:bottomleft:image 
border:bottom:Image, 








图 13-41 81pxX8lpx 位 图 及 九宫 格 分 割 法 


边框 图 像 剪 裁 完 后 ， 就 可 以 用 裁 切 的 各 区 域 图 分 别 进行 绘制 。 其 中 ， 四 个 角 在 绘制 时 
会 分 布 在 应 用 元 素 的 四 个 角 上 ， 不 会 拉 伸 、 平 铺 或 者 重复 。 其 他 四 条 边 〈 除 了 中 间 5) 的 
图 像 分 别 用 来 绘制 相应 的 四 条 边 ， 四 条 边 会 应 用 border-image-repeat 中 设 定 的 排列 方式 。 

。 border-image-width 属性 〈 边 框图 像 宽度 )。 

border-image-width 属性 有 四 个 值 指定 用 于 把 border 图 像 区 域 分 为 九 个 部 分 。 它 们 代 
表 上 、 右 、 底 部 、 左 、 两 侧 向 内 距离 。 如 果 第 四 个 值 被 省 略 ， 它 和 第 二 个 是 相同 的 。 如 果 
也 省 略 了 第 三 个 ， 那 么 它 和 第 一 个 是 相同 的 。 如 果 也 省 略 了 第 二 个 ， 那 么 它 和 第 一 个 是 相 
同 的 。 负 值 是 不 允许 的 。 

border-image-width: number |% ;/* 可 以 有 1 一 4 个 值 ， 类 似 于 border-width 属 性 */ 

border-image-width:27px 1 10% 27px;/* 边框 图 像 宽度 设置 为 Lop:27px, right:1 倍 ， 
bottom:10%, left:27px */ 

。 border-image-outset 属性 〈 图 像 外 凸 )。 

通过 定义 距离 边框 图 像 区 域 边 缘 的 向 内 偏 移 量 ， 从 而 指定 边框 图 像 的 宽度 /高 度 ， 如 图 
13-42 所 示 。 注 意 此 属性 和 border-width 的 区 别 。 


border-image-outset: length | number | percentage | auto; /* 可 以 有 1 一 4 个 值 */ 


例如 ， 设 置 div 的 类 样式 如 下 ， 边 框图 像 不 向 外 凸 出 ， 页 面 效果 如 图 13-42 所 示 。 
.box{ 

width: 200px; height: 50px; 

border: 54px solid red; /* 边框 宽度 54px */ 

border-image: url ("border.png") 27/27px round;/* 边 框图 像 高 度 与 宽度 均 为 27px */} 


图 13-42 定义 边框 图 像 宽 度 、 高 度 的 效果 图 
例如 ， 设 置 div 的 类 样式 如 下 ， 边 框图 像 向 外 凸 出 ， 页 面 效 果 如 图 13-43 所 示 。 


.boxt{ 
width: 200px; height: 50px; 
border: 54px solid red; /* 边框 宽度 54px */ 
border-image: url("border.png") 27/15px/10px round; /* 指 定 边框 背景 图 
像 宽度 为 15px、 偏 移 量 为 10px */} 


偏 移 量 是 建立 在 边框 背景 宽度 的 基础 上 的 , 设置 偏 移 量 的 时 候 边 框 背景 宽度 不 能 为 0。 | 第 
13 
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图 13-43 定义 边框 图 像 宽度 及 偏 移 量 的 效果 图 
【 例 13-6-3】CSS3 图 像 边 框 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-44 所 示 。 


1 l== Bla 13 6 3:htnl ==> 
2 <!doctype html> : 
3 <html lang="en"> yo 

4 <head> 、 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title>CSS3 图 像 边框 的 应 用 </title> 

汪 <script type="text/javascript" src="html5shiv.js"></script> 

8 <link rel="stylesheet" href="css/normalize.css" type="text/css"> 
9 
10 
11 





<script type="text/javascript" src="js/prefixfree.min.js"> </script> 
<style type="text/css"> 
div{float:left;width:120px;height:120px;margin:30px 30px; 
background:#dadada;border:1lem solid #00cc66;padding:5px; } 


kp #divl {border-image:url ("border.png") 27 27 stretch;} 
13 #div2 {border-image:url ("border.png") 27 27 round;} 
14 #div3{border-image:url ("border.png") 27 27 repeat;} 
1 </style> 


16 </head> 
17 <body> 


18 <h3>CSS3 图 像 边 框 的 应 用 </h3><hr> 





9 class=""><p>stretch</p></div> 

20 class=""><p> round</p></div> 

21 <div id="div3" class=""><p>repeat</p></div> 

22 <div id="div4" class=""> 

23 <p> 这 是 原 图 <img src="border.png" border="0" alt=""></p> 
24 </div> 

25 </body> 

26 </html> 
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图 13-44 CSS3 图 像 边框 的 应 用 


13.6.4 CSS3 转换 transform 属性 


通过 CSS3 转换 ， 可 以 实现 对 元 素 进行 移动 、 缩 放 、 转 动 、 拉 长 或 拉 伸 。 所 谓 转 换 ， 
就 是 改变 元 素 形状 、 尺 寸 和 位 置 ， 使 其 达到 另外 一 种 效果 的 过 程 。 可 以 对 元 素 进行 2D 或 
3D 转换 。 

1. CSS3 2D 转换 

CSS3 2D 转换 常用 方法 有 translate()、rotate()、scale()、skew()、matrix()。 下 面 分 别 介 
绍 每 一 种 方法 。 

。 位 移 translate(x,y)。 

translate(x,y) 方 法 的 作用 是 将 元 素 从 当前 位 置 根据 给 定 的 x 轴 坐 标 和 y 轴 坐 标 进 行 移 
动 。x 表示 left， 父 元 素 的 左边 界 ; y 表示 top， 父 元 素 的 上 边界 。translate() 方 法 还 提供 根 
据 单一 轴 移 动 的 方法 ， 分 别 是 translateXO 和 translateY()。 使 用 方法 如 下 : 

transform:translate (50px, 50px); /* 向 右 移动 50px， 向 下 移动 50px */ 





transform:translate (50px, 0); /* 向 右 移动 50px */ 
transform:translateXx (50px); /* 向 右 移动 50px */ 
transform:translate (0, 50px); /* 向 下 移动 50px */ 
transform:translateY (50px); /* 向 下 移动 50px */ 


。 旋转 rotate(deg)。 
可 以 对 元 素 旋转 给 定 的 角度 ， 正 值 为 顺 时 针 ， 负 值 为 逆 时 针 。 


transform: rotate (deg) /* ”基本 语法 */ 
transform: rotate (10deg) /* 旋转 10” */ 
transform: rotate (120deg) /* 旋转 120” */ 


【 例 13-6-4】CSS3 位 移 与 旋转 的 应 用 。 局 部 代码 如 下 ， 页 面 效 果 如 图 13-45 所 示 。 


1 <!-- edu 13 6 4.html --> 
2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

3 <meta charset="UTF-8"> 视频 讲解 
6 <title>CSS3 2D 转 换 - 位 移 与 旋转 </title> 

7 <script type="text/javascript" src="html5shiv.js"></script> 

8 <link rel="stylesheet" href="css/normalize.css" type="text/css"> 
9 

10 

BE 





<script type="text/javascript" src="js/prefixfree.min.js"></script> 
<style type="text/css"> 
div{width:180px;height:50px;background:#dadada;border:1px solid 
#00cc66; } 


12 #divl{transform:translate (50px, 50px);} /* 位 移 */ 

13 #div2{transform: rotate (30deg);} /* 旋转 */ 

14 #div3{transform:rotate (120deg);} /* 旋转 */ 

5 td{text-align:left;vertical-align:top;} 

16 </style> 

EE </head> 

18 <body> 

19 <h3>CSS3 2D 转 换 -位 移 与 旋转 </h3><hr> 

20 <table border="1lpx" bordercolor="red" width="750px" height="200px"> 第 
21 <tr> 

22 <td> 13 
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3 <div id="" class=""><p> 这 是 原 div</p></div> 
24 <div id="div1"” class=""><p> 这 个 div 向 右 移动 50px， 向 下 移动 
50px</p></div> 
25 </td> 
26 <td> 
27 <div id="" class=""><p> 这 是 原 div</p></div> 
28 <div id="div2" class=""><p> 这 个 div 旋 转 30 度 </p></div> 
2 </td> 
30 <td> 
3 <div id="" class=""><p> 这 是 原 dijv</p></div> 
32 <div id="div3” class=""><p> 这 个 div 旋 转 120 度 </p></div> 
33 </td> 
34 /E> 
3 </table> 
36 </body> 
37 </html> 
Se 
由 css3 2D 因 搞 包 和 = x a 
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Css3 2D 转 换 -位 移 与 旋转 
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图 13-45 CSS3 2D 位 移 与 旋转 的 应 用 


。 缩放 scale(x, y)。 

scale(x,y) 方 法 的 作用 是 缩放 指定 的 元 素 ， 参 数 x 表示 元 素 宽度 的 缩放 倍数 ， 参 数 y 表 
示 元 素 高 度 的 缩放 倍数 。scale 方法 也 可 以 接受 负 值 ， 当 参数 x 为 负 值 时， 元 素 内 容 会 横向 
倒置 ， 当 参数 y 为 负 值 时 ， 元 素 内 容 会 纵向 倒置 。 

transform: scale (x, y); 

transform: scale (1,4); 

transform: scale (2,2); 

。 扭曲 skew(deg, deg)。 

skew(x,y) 方 法 的 作用 是 将 元 素 翻 转 ( 扭 曲 )》 给 定 的 角度 ， 参 数 x、y 分 别 表示 围绕 x 
轴 翻 转 给 定 的 角度 、 围 绕 y 轴 翻 转 给 定 的 角度 。 

transform: skew(deg, deg); 


transform: skew(30deg, 30deg); /* 围 绕 x 轴 翻转 30”， 围 绕 y 轴 翻转 30” */ 
transform: skew(l5deg, 65deg); /* 围 绕 x 轴 翻转 15”， 围 绕 y 轴 翻转 65” */ 


。 综合 转换 matrix(n,n,n,n,n,n)。 

matrix() 方 法 和 2D 变换 方法 合并 成 一 个 。matrix() 方 法 是 一 个 综合 性 的 方法 ， 它 综合 
上 述 的 移动 、 旋 转 、 缩 放 等 功能 。matrix() 方 法 有 六 个 参数 ， 包 含 旋转 、 缩 放 、 移 动 (平移 ) 
和 倾斜 功能 。 语 法 如 下 ， 参 数 的 作用 如 下 : 


transf 


orm:matrix(scaleX, skewX, skewY, scaleY，translateX，translateY) 7 


/* 基本 语法 */ 


transf 


orm:matrix(0.866,0.5, -0.5,0.866,20,20); /* x 轴 、y 轴 缩放 0.866;x 轴 、y 


轴 扭 曲 0 .5 和 -0.5;zx 轴 、y 轴 位 移 20px */ 


参数 1: 
参数 2: 
参数 3: 
参数 4: 
参数 5: 
参数 6: 


控制 横向 缩放 ， 作 用 于 元 素 的 宽度 ， 类 似 于 scaleX。 
控制 围绕 x 轴 翻 转 的 角度 ， 类 似 于 skewX。 

控制 围绕 y 轴 翻 转 的 角度 ， 类 似 于 skewY。 

控制 纵向 缩放 ， 作 用 于 元 素 的 高 度 ， 类 似 于 scaleY 。 
控制 元 素 移动 ， 沿 x 轴 进 行 ， 类 似 于 translateX。 
控制 元 素 移动 ， 沿 y 轴 进 行 ， 类 似 于 translateY 。 


【 例 13-6-$】CSS3 缩放 、 扭 曲 、 甜 阵 综合 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-46 所 示 。 


<ls= da 13 6 Sihtnl ==% 
2 <!doctype html> 
3 <html lang="en"> 


4 
5 
6 
昌 
8 
9 


#00cc66; 


0 
1 
6 
2 
3 
4 
时 
6 
7 
8 





9 
20 
21 
22 
23 
24 
25 
26 
2 
28 
2 
30 
31 
3 
33 
34 


35 
36 
37 
38 </h 


<head> 

<meta charset="UTF-8"> 

<title>CSS3 2D 转 换 -扭曲 、 缩 放 </title> 

<script type="text/javascript" src="html5shiv.js"></script> 

<link rel="stylesheet" href="css/normalize.css" type="text/css"> 

<script type="text/javascript" src="js/prefixfree.min.js"> </script> 

<style type="text/css"> 
div{width:100px;height:50px;background:#dadada;border:1lpx solid 





#divl{transform:scale(1.5,1.5) ;margin:10px auto;} 
#div2{transform: skew (30deg, 30deg) ;margin:10px auto;} 
#div3{transform:matrix(0.866,0.5,-0.5,0.866,20,20); 
/* x 轴 、y 轴 缩放 0 .866;x 轴 、y 轴 扭曲 0 .5 和 -0 .5;x 轴 、y 轴 位 移 20px*/} 
td{text-align:left;vertical-align:top;} 
</style> 
</head> 
<body> 
<h3>CSS3 2D 转 换 -缩放 、 扭 曲 、 和 矩阵 </h3><hr> 
<table border="lpx" bordercolor="red" width="750px" height="200px"> 





<tr> 
<td> 
<div id="" class=""><p> 这 是 原 div</p></div> 
<div id="divl" class=""><p> 这 个 div 缩 放 1.5 倍 </p></div> 
</td> 
<td> 
<div id="" class=""><p> 这 是 原 div</p></div> 
<div id="div2" class=""><p> 这 个 div 扭 曲 方法 </p></div> 
</td> 
<td> 
<div id="" class ><p> 这 是 原 div</p></div> 
<div id="div3"” class=""><p> 这 是 div 采 用 matrix 方 法 </p></div> 
</td> 
</tr> 
</table> 
</body> 


tml> 
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图 13-46 CSS3 2D 缩放 、 扭 曲 、 和 矩阵 综合 应 用 


2. CSS3 3D 转换 

CSS3 可 以 使 用 3D 转换 来 对 元 素 进行 格式 化 。 常 用 的 3D 转换 方法 有 rotateX()、 
rotateY()。 

。 旋转 rotateX() 方 法 。 

通过 rotateX0 方 法 ， 元 素 围绕 其 X 轴 以 给 定 的 度数 进行 旋转 。 

。 旋转 rotateY() 方 法 。 

通过 rotateY0 方 法 ， 元 素 围 绕 其 Y 轴 以 给 定 的 度数 进行 旋转 。 

transform: rotateX(angle);  /* X 轴 方向 旋转 一 定 角度 */ 

transform: rotateY(angle);  /* Y 轴 方向 旋转 一 定 角度 */ 


#divl{transform:rotateX(120deg);} 
#div2{transform:rotateY (120deg) ;margin:10px auto;} 


【 例 13-6-6】CSS3 3D 旋转 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-47 所 示 。 


1 <1-= du 13 6 6.html =-> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 视频 讲解 

6 <title>CSS3 3D 转 换 </title> 

<script type="text/javascript" src="html5shiv.js"></script> 

8 <link rel="stylesheet" href="css/normalize.css" type="text/css"> 

9 <script type="text/javascript" src="js/prefixfree.min.js"></script> 

10 <style type="text/css"> 

3 div{width:150px;height:80px;background:#dadada;border:1px solid 
#00cc66; } 

32 #divl{transform:rotateXx (120deg);} 

3 #div2{transform: rotateY (120deg) ;margin:10px auto;} 

14 td{text-align:left;vertical-align:top;} 

3 </style> 


16 </head> 
17 <body> 





18 <table border="1px" align="center" width="450px" height="200px"> 
19 <caption><h3>CSS3 3D 转 换 </h3></caption> 

20 <tr> 

21 <td> 

2 <div id="" class=""><p> 这 是 原 div</p></div> 

23 <div id="divl"” class=""><p> 沿 Xx 轴 旋转 这 个 div</p></div> 
24 </td> 

25 <td> 


26 <div id="" class=""><p> 这 是 原 div</p></div> 


学 <div id="div2" class=""><p> 沿 Y 轴 旋转 这 个 div</p></div> 








28 </td> 
29 </tr> 
30 </table> 
31 </body> 
32 </html> 
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图 13-47 CSS3 3D 旋转 应 用 


13.6.5 CSS3 过 渡 transition 属性 


通过 CSS3 过 渡 ， 可 以 在 不 使 用 Flash 动画 或 JavaScript 的 情况 下 ， 实 现 元 素 从 一 种 样 
式 到 另 一 种 样式 的 转变 效果 。 

CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 的 效果 。 要 实现 这 种 效果 ， 需 要 设置 
两 个 因素 , 分 别 是 指定 要 添加 效果 的 CSS 属性 、 指 定 效果 的 持续 时 间 。 如 果 未 指定 的 期 限 ， 
transition 将 没有 任何 效果 ， 因 为 默认 值 是 0。 

transition 属性 是 一 个 复合 属性 ， 它 有 四 个 过 渡 属 性 ， 如 表 13-10 所 示 。 语 法 如 下 : 


transition: property duration timing-function delay; 
transition: width 2s; /* 宽度 上 过 渡 2s */ 


表 13-10 ”transition 属性 的 值 及 说 明 


值 说 明 
transition-property 规定 设置 过 渡 效果 的 CSS 属性 的 名 称 
transition-duration 规定 完成 过 渡 效 果 需 要 多 少 秒 或 毫秒 
transition-timing-function 规定 速度 效果 的 速度 曲线 


定义 过 渡 效 果 何 时 开始 


transition-delay 





® transition-property。 

transition-property 属性 指定 CSS 属性 的 nametransition 效果 (transition 效果 时 将 会 启 
动 指定 的 CSS 属性 的 变化 )。 一 个 转 场 效 果 ， 通 常会 出 现在 当 用 户 将 鼠标 悬 停 在 一 个 元 素 
上 时。 

transition-property: nonelalll| property; 


transition-property: width;  /* width 属 性 上 转 场 */ 


® transition-duration。 
transition-duration 属性 规定 完成 过 渡 效 果 需 要 花费 的 时 间 〈 以 秒 或 毫秒 计 )。 


第 
transition-duration: time; 13 
transition-duration: 3s; i 
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e transition-timing-function。 


transition-timing-function: linearleaselease-inlease-outlease-in-out| cubic- 
bezier (n,n,n,n); 


其 6 种 取 值 分 别 为 匀速 jnear、 逐 渐变 慢 ease、 加 速 ease-in、 减 速 ease-out、 加 速 后 减 
速 ease-in-out、 贝 塞 尔 曲线 cubic-bezier(n,n,n,n)， 如 表 13-11 所 示 。 


表 13-11 transition-timing-function 的 值 及 说 明 
说 明 
规定 以 相同 速度 从 开始 至 结束 的 过 渡 效 果 (cubic-bezier(0,0,1,1)) 
规定 以 慢 速 开始 、 变 快 、 慢 速 结束 的 过 渡 效 果 。 

类 似 于 cubic-bezier(0.25,0.1,0.25,1) 

规定 以 慢 速 开始 的 过 渡 效 果 ( cubic-bezier(0.42,0,1,1)) 
规定 以 慢 速 结束 的 过 渡 效 果 (cubic-bezier(0,0,0.58,1)) 
规定 以 慢 速 开始 和 结束 的 过 渡 效 果 (cubic-bezier(0.42,0,0.58,1)) 
在 cubic-bezier 函数 中 定义 自己 的 值 。 可 能 的 值 在 0~1 之 间 






























ease-out 
ease-in-out 
cubic-bezier(n,n,n,n) 


® transition-delay。 
transition-delay 属性 指定 何 时 将 开始 切换 效果 。 指 以 秒 (s) 或 毫秒 (ms) 为 单位 。 


transition-delay: time; 
transition-delay: 2s; 


【 例 13-6-7】CSS3 过 渡 与 转换 综合 的 应 用 。 代码 如 下 ， 页面 效 果 如 图 13-48 和 图 13-49 
所 示 。 


es= 0 1 6 Tl =5> 
2 <!doctype html> 


国 必 了 
3 <html lang="en"> 有 
<head> 视频 讲解 






4 

5 <meta charset="UTF-8"> 

6 <title>CSS3 过 渡 </title> 

<script type="text/javascript" src="html5shiv.js"></script> 

8 <link rel="stylesheet" href="css/normalize.css" type="text/css"> 

9 <script type="text/javascript" src="js/prefixfree.min.js"></script> 

10 <style> 

3 主 div{width:100px;height:50px;background:#009999;color:white; 
font-weight:bold; 

4 transition:width 2s,height 2s,transform 2s;/* 3 个 属性 过 渡 */} 

13 #divl {transition-timing-function: linear;} 

14 #div2 {transition-timing-function: ease;} 

5 #div3 {transition-timing-function: ease-in;} 

16 #div4 {transition-timing-function: ease-out;} 

Ey #div5 {transition-timing-function: ease-in-out;} 

18 div:hover{width:200px; height:100px;transform:rotate(60deg); 

49 /* 盘旋 时 过 渡 + 旋 转 */} 

20 </style> 

21 </head> 

全 <body> 

23 <h3>CSS3 过 渡 transition 与 transform 综 合 应 用 </h3><hr color="red"> 

24 <div id="divl" style="top:100px">linear</div> 

25 <div id="div2" styl top:150px">ease</div> 





26 <div id="div3" style="top:200px">ease-in</div> 


27 <div id="div4" style="top:250px">ease-out</div> 


28 <div id="div5" style="top:300px">ease-in-out</div> 

29 <p> 请 把 鼠标 指针 移动 到 红色 的 div 元 素 上 ， 就 可 以 看 到 <mark> 过 渡 和 转换 </mark> 
的 效果 。</p> 

30 </body> 

31 </html> 
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图 13-48 CSS3 过 渡 初 始 状态 图 图 13-49 CSS3 过 渡 盘 旋 时 状态 图 


13.6.6 CSS3 动画 animation 


所 谓 CSS3 动画 ， 就 是 指 元 素 从 一 种 样式 逐渐 变化 为 另 一 种 样式 的 效果 。 通 过 CSS3 
的 @keyframes( 关 键 帧 ) 规 则 , 可 以 创建 动画 , 从 而 取代 动画 图 片 Flash 动画 以 及 JavaScript 
编写 的 动画 。 在 @keyframes 中 规定 某 项 CSS 样式 ， 就 能 创建 由 当前 样式 逐渐 改 为 新 样式 
的 动画 效果 。 

1. CSS3 动画 animation 基本 语法 

animation 是 一 个 复合 属性 ， 语 法 如 下 ， 其 属性 及 说 明 如 表 13-12 所 示 。 


animation:animation-namelanimation-durationlanimation-timing-functionla 
nimation-delay | animation-iteration-count| animation-direction 
表 13-12 CSS3 动画 属性 及 说 明 
属 性 说 ”了 明 


(@keyframes 


animation 


规定 动画 

所 有 动画 属性 的 复合 属性 ， 除 了 animation-play-state 属性 

规定 @keyframes 动画 的 名 称 

规定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 ， 默 认 是 0 

规定 动画 的 速度 曲线 ， 默 认 是 ease， 其 他 与 transition-timing-function 属 
性 值 相同 

规定 动画 何 时 开始 ， 默 认 是 0 

规定 动画 被 播放 的 次 数 n 〈 值 为 1 (默认 )、infinite) 

规定 动画 是 否 在 下 一 周期 逆向 地 播放 〈 值 为 normal (默认 )、alternate) 
规定 动画 是 否 正在 运行 或 暂停 ， 其 值 为 running (默认 )、paused 

规定 对 象 动画 时 间 之 外 的 状态 (其 值 为 none、 forwards、 backwards、 both) 





animation-name 





animation-duration 


animation-timing-function 





animation-delay 





animation-iteration-count 





animation-direction 





animation-play-state 








animation-fill-mode 


2. @keyframes 规则 定义 第 
采用 @keyframes 规则 创建 动画 ， 需 要 将 它 绑 定 到 一 个 CSS 的 选择 器 ， 否 则 动画 不 会 “| 13 
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有 任何 效果 。 定 义 至 少 以 下 两 项 CSS3 动画 属性 ， 即 可 将 动画 绑 定 到 选择 器 : 规定 动画 的 
名 称 、 规 定 动画 的 时 长 。 
@keyframes 基本 语法 : 
Q@keyframes myAnimation { 
from {Properties:Properties value; } 
Percentage {Properties:Properties value; } 


to {Properties:Properties value; } 


} 
或 者 全 部 写成 百分比 的 形式 : 


@keyframes myAnimation { 
0% {Properties:Properties value; } 
Percentage {Properties:Properties value; } 
100% {Properties:Properties value; } 


} 


语法 说 明 : 其 中 myAnimation 是 一 个 动画 名 称 ， 最 好 有 特定 的 含义 。 用 百分比 来 规定 
变化 发 生 的 时 间 ， 或 用 关键 词 fom 和 to， 等 同 于 0% 和 100%。0% 是 动画 的 开始 ，100% 
是 动画 的 完成 。Percentage 是 百分比 值 ， 我 们 可 以 添加 许多 个 这 样 的 百分比 ，Properties 为 
CSS 的 属性 名 ， 例 如 width、heigth、background 等 ，value 就 是 对 应 的 属性 的 值 。 选 择 器 
from 和 to 分 别 对 应 选择 器 0% 和 100%。Internet Explorer 9 及 更 早 正 版 本 是 无 效 的 。 

为 了 得 到 最 佳 的 浏览 器 支持 ， 至 少 应 该 定义 0% 和 100% 选 择 器 两 个 选择 器 。 中 间 状 态 
也 可 以 根据 需要 增加 mn 个 选择 器 ， 并 定义 样式 ， 来 完成 动画 。 

3，@keyframes 规则 的 绑 定 

绑 定 动画 名 称 〈 例 如 myAnimation) 到 某 个 元 素 (diV) 的 样式 上 ， 并 指定 时 长 。 格 式 如 下 ;: 


divt{ 
animation: myAnimation 8s; 
-moz-animation: myAnimation 8s; /* Firefox */ 
-webkit-animation: myAnimation 8s; /* Safari 和 Chrome */ 
-o-animation: myAnimation 8s; /* Opera */ 


} 
以 Safari 和 Chrome 浏览 器 为 例 ， 说 明 动 画 的 设置 方法 ， 代 码 如 下 所 示 。 


div{ 
/* 设置 图 层 基 本 样式 */ 
width:100px;height:100px;background:red;position:relative; 
/* 设置 标准 动画 子 属性 */ 
animation-name:myMOve; 
animation-duration:5s; 
animation-timing-function:linear; 
animation-delay:2s; 
animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* 仅 以 Safari and Chrome 浏 览 器 为 例 ， 其 余 类 似 。 */ 
-webkit-animation-name: myMOve; 
-webkit-animation-duration:5s7 


—webkit-animation-timing-function:linear; 
-webkit-animation-delay:2s7 
-webkit-animation-iteration-count:infinite7 
-webkit-animation-direction:alternate7 
—webkit-animation-play-state:running; 
} 
Qkeyframes myMOve 
{ ”/* 定义 不 同 关键 帧 的 样式 */ 
0% {background:red; left:0px; top:0px;} 
25% {background:yellow; left:200px; top:0px;} 
50% {background:blue; left:200px; top:200px;} 
75% {background:green; left:0px; top:200px;} 
100% {background:red; left:0px; top:0px;} 
} 
@-webkit-keyframes myfirst /* 仅 以 Safari and Chrome 为 例 */ 
{ _/* 定义 不 同 关键 帧 的 样式 */ 
0% {background:red; left:0px; top:0px;} 
25% {background:yellow; left:200px; top:0px;} 
50% {background:blue; left:200px; top:200px;} 
75% {background:green; left:0px; top:200px;} 
100% {background:red; left:0px; top:0px;} 
} 


【 例 13-6-8】CSS3 动画 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-50 所 示 。100px X 100px 
的 div 沿 300pxX300px 的 矩形 对 角 线 运动 。 边 运动 边 改变 背景 颜色 ， 从 红色 到 蓝 色 过 渡 。 
设置 三 个 场景 切换 : 初始 状态 为 红色 背景 ， 中 间 状 态 为 绿色 背景 ， 最 后 状态 为 蓝 色 背景 。 
同时 考虑 到 不 同 浏览 器 的 兼容 性 ， 代 码 中 增加 了 针对 不 同 浏览 器 编写 的 样式 效果 。 

1 <!-- edu 13 6 8.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 、 

6 <title>CSS3 动 画 </title> 视频 讲解 
浊 <style> 

8 div{width:100px;height:100px;background: red;position:relative; 

9 animation:mymove 5s ; color:white; 

10 -moz-animation:mymove 5s infinite; /* Firefox */ 

3 —webkit-animation:mymove 5s infinite; /* Safari and Chrome */ 
Be -o-animation:mymove 5s infinite; /* Opera */ 

和 } 

14 @keyframes mymove 

15 { 

16 from,0% {left:0px;background:red;top:0px;} 

17 50% {left:100px;background:green;top:100px;} 

18 to,100%{left:200px;background:blue;top:200px;} 

19 } 

20 @-webkit-keyframes mymove /* Safari 与 Chrome */ 

21 { 

2 from,0% {left:0px;background:red;top:0px;} 

全 了 50% {left:100px;background:green;top:100px;} 

24 to,100%${left:200px;background:blue;top:200px;} 

25 } 

26 @-moz-keyframes mymove /* Firefox */ 

27 { 第 
28 from,0% {left:0px;background:red;top:0px;} 13 
29 50% {left:100px;background:green;top:100px;} 
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30 to,100%${left:200px;background:blue;top:200px;} 
31 } 
32 Q@-o-keyframes mymove /* Opera */ 
3 { 
34 from,0% {left:0px;background:red;top:0px;} 
35 50% {left:100px;background:green;top:100px;} 
36 to,100%${left:200px;background:blue;top:200px;} 
37 } 
38 </style> 
39 </head> 
40 <body> 
41 <h3>CSS3 动 画 - 沿 矩形 对 角 线 运 动 </h3><hr> 
42 <div> 我 在 运动 ! </div> 
43 </body> 
44 </html> 
a + oo 
一 “= 一 一 一 
ea rr 





(a) 初始 状态 图 (b) 中 间 状 态 图 (c) 最 后 初始 状态 图 





图 13-50 CSS3 动画 状态 图 


13.6.7 CSS3 多 列 属性 


使 用 CSS3 多 列 属 性 可 以 创建 多 个 列 来 对 文本 进行 布局 ,如同 编辑 报纸 和 杂志 一 样 。 但 下 9 
以 及 更 早 的 版 本 不 支持 多 列 属 性 。 常 用 的 CSS3 多 列 属性 主要 有 column-count、column-gap、 
column-rule 等 ， 如 表 13-13 所 示 。 


表 13-13 CSS3 多 列 属性 值 及 说 明 
































属 性 说 ”了 明 
columns 规定 设置 column-width 和 column-count 的 复合 属性 
column-count 规定 元 素 应 该 被 分 隔 的 列 数 
column-width 规定 列 的 宽度 
column-fill 规定 如 何 填充 列 
column-gap 规定 列 之 间 的 间隔 
column-rule 设置 所 有 column-rmle-* 属 性 的 复合 属性 
column-rule-width 规定 列 之 间 规 则 的 宽度 
column-rule-style 规定 列 之 间 规 则 的 样式 
column-rule-color 规定 列 之 间 规 则 的 颜色 
column-span 规定 元 素 应 该 横 跨 的 列 数 

基本 语法 


columns: column-width column-count; /* 复合 属性 */ 


column-count: numberlauto 

column-width: autollength; 

column-rule: column-rule-width column-rule-style column-rule-color;/* 复合 属性 */ 

column-rule-width: thinlmedium|lthick|llength; 

column-rule-style: nonelhiddenldottedldashedlsolidldoublelgroovel ridgel 
insetloutset; 

column-rule-color: color; 

column-gap: lengthl|normal; 

column-fill: balancelauto; /* balance 列 长 短 平 衡 ; auto 列 顺序 填充 */ 


【 例 13-6-9】CSS3 多 列 属性 的 应 用 。 代 码 如 下 ， 页 面 效 果 如 图 13-51 所 示 。 


1 <!-- edu 13 6 9.html --> 





2 <!doctype html> 国 的 流 je 
3 <html lang="en"> 加 

4 <head> [ep 

SS <meta charset="UTF-8"> a 

6 <title>CSS3 多 列 属性 的 应 用 </title> 视频 讲解 
<style> 

8 pt{ 

9 text-indent:2em; 

0 column-count:3; /* 设置 列 数 */ 

1 column-gap:50px; /* 设置 列 间隙 */ 

2 column-rule:4px outset #ff0000; /* 设置 列 宽度 、 线 型 、 颜 色 */ 
3 } 

4 h2{ 

5 column-span:all; /* 设置 标题 跨 所 有 列 */ 

6 text-align:center;background:#99ff99; 

height:40px; font-size:28px;padding:6px auto;} 

8 </style> 

9 </head> 


20 <body> 

21 <h2>HTML 5 简介 </h2> 

22 <p>HTML 标 准 自 1999 年 12 月 发 布 的 HTML4 .01 后 ,后继 的 HTML5 和 其 他 标准 被 束 之 高 
阅 ， 为 了 推动 Web 标 准 化 运动 的 发 展 ， 一 些 公司 联合 起 来 ， 成 立 了 一 个 叫 作 Web Hypertext 
Application Technology Working Group (Web 超 文本 应 用 技术 工作 组 -WHATWG) 的 组 织 。 
WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C (World Wide Web Consortium， 万 维 网 联盟 ) 专 
注 于 XHTML2 .0。 在 2006 年 ， 双 方 决定 进行 合作 ， 来 创建 一 个 新 版 本 的 HTML。<br> 


23 HTML5 草 案 的 前 身 名 为 Web Applications 1.0, 于 2004 年 被 WHATWG 提 出 , 于 2007 
年 被 W3C 接 纳 ， 并 成 立 了 新 的 HTML 工作 团队 。<br> 

24 HTML 5 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 。HTML5 仍 处 于 完善 之 中 。 然而， 
大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 支持 。<br> 

25 2012 年 12 月 17 日 ， 万 维 网 联盟 (CW3C) 正式 宣布 凝结 了 大 量 网 络 工作 者 心血 的 HTML5 
规范 已 经 正式 定稿 。 根 据 w3cC 的 发 言 稿 称 ，“HTML5 是 开放 的 Web 网 络 平台 的 葛 基 石 。”<br> 

26 2013 年 5 月 6 日 ， HTML 5.1 正式 草案 公布 。 该 规范 定义 了 第 五 次 重大 版 本 ， 第 一 次 


要 修订 万 维 网 的 核心 语言 : 超 文本 标记 语言 (HTML) 。 在 这 个 版 本 中 ， 新 功能 不 断 推出 ， 以 帮助 Web 应 
用 程序 的 作者 ， 努 力 提高 新 元 素 互 操作 性 。<br> 

27 本 次 草案 的 发 布 ， 从 2012 年 12 月 27 日 至 今 ， 进 行 了 多 达 近 百 项 的 修改 ， 包 括 HTML 和 
XHTML 的 标签 ， 相 关 的 API、Canvas 等 ， 同 时 HTML5 的 图 像 img 标 签 及 svg 也 进行 了 改进 ， 性 能 得 到 进 
一 步 提升 。<br> 

28 支持 Html5 的 浏览 器 包括 Firefox (火狐 浏览 器 ) ，IE9 及 其 更 高 版 本 ，Chrome ( 谷 
歌 浏览 器 ) ，Safari，Opera 等 ; 国内 的 傲游 浏览 器 (Maxthon) ， 以 及 基于 IE 或 Chromium (Chrome 
的 工程 版 或 称 实验 版 》 所 推出 的 360 浏 览 器 、 搜 狗 浏览 器 、QQ 浏 览 器 、 猫 鹏 浏览 器 等 国产 浏览 器 同样 具 
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备 支持 HTML5 的 能 力 。</p> 





29 </body> 
30 </html> 
CD me///F7Webg 柄 开 瑟 持 趟 - 逢 3 类 -20170518/ 获 子 全 SR 于 更/ch13/edkl 13 7 9 html 
HTMUIR 白 1999 年 12 月 发 布 的 TY HTML 工人 EL 加 力 扫 记 新 元 于 习作 性 , 
HTML401 后 ,后 昌 的 HTML5I 其 它 标 准 。 | HTML 5 的 第 一 闪 正式 节 究 已 于 2008 年 1 。 | 。 志平 0 发 布 , 从 2012 年 12 月 27 日 下 
被 页 之 闹 羡 ,为 二 月 22 日 公布 HTMLS 仍 处 于 完 闲 之 : 今 ,进行 了 多 ， 
发 展 ， 一些 公司 联名 起来 , 成立 了 一 个 全 2 了 和 TMUROXHTML 的 标 答 ,相关 的 API 
作 Web HTML5 支持 ， Canvas 等 ， 风 HTMLS8 加 售 mg 标 到 及 
Technology Working Group (Web 天 2012 年 12 月 17 日 ,万 进 闯 联 乞 (W3C ) 5Syvg9 也 进行 了 改进 , 癌 
文本 应 用 技术 工作 诅 -WHATWG ) 的 组 。 |， 正式 村 布 要 结 了 大 最 网 烧 工 作者 和 的 《类 可 
可 WHATWG 政 力 于 Web 表单 和 本 用 。 | HTML5 科 范 已 正式 定 网 要 村 W3C 的 发。| 下 址 ) , IE9 及 天 更 记 卫 本 ,Chrome ( 从 
程序 .再 W3C ( World Wide Web :MSmTeoWebmm Te | Bom). csor .Operate : meen 
Consortium , 万 淮 风 联 壮 】 专注 于 3 (Maxthon ) ,以 及 基于 IE 吕 
XHTML2.0。 在 2006 年 ， 双方 决定 进行 上 HTML SL ee Cheomium ( Cl 
合作 ， 幸 全 奸 一 个 新 大 本 的 HTML 布 ， 该 类 定义 了 征 五 次 草 大 折 本 原 ) 包容 899360 尖 区 名 相交 末 珊 
HTML5 草 训 的 月 身 名 为 Web 
Applications 1.0 , 于 2004 年 流 杰 训 (HTML) 。 在 这 个 版 本 中 , 产能。 | 具 各 赤 持 HTMLS89 由 力 。 
WHATWG 提 出 ,于 2007 年 被 W3C 失 的 ，。 | 。 干 时 推出 ， 以 昌吉 Web 应 用 种 99 作 者 ， 








图 13-51 CSS3 多 列 属性 的 应 用 


13.6.8 CSS3 文本 效果 


CSS3 新 定义 了 多 个 文本 特性 ， 常 用 的 文本 属性 有 文本 阴影 text-shadow、 控 制 换行 
word-wrap、 文 本 游 出 text-overflow、 文 本 换行 text-wrap 等 。 

1. 文本 阴影 text-shadow 属性 

1) 基本 语法 


text-shadow: h-shadow v-shadow blur color; 
text-shadow:2px 2px 8px #FF0000; 


2) 语法 说 明 

text-shadow 属性 向 文本 添加 一 个 或 多 个 阴影 。 该 属性 是 空格 分 隔 的 阴影 列表 ， 其 中 
h-shadow 定义 水 平 阴 影 ， 允 许 负 值 ， 必 需 ; v-shadow 定义 垂直 阴影 ， 人 允许 负 值 ， 必 需 ; 
blur 可 选 。 模 糊 的 距离 。color 可 选 。 阴 影 的 颜色 。 省 略 的 长 度 是 0。 

2. 文本 换行 text-wrap 属性 

1) 基本 语法 


text-wrap: normallnonelunrestricted|suppress; 

2) 语法 说 明 

text-wrap 属性 指定 文本 换行 规则 。 所 有 浏览 器 目前 均 不 支持 此 属性 。 

3. 控制 换行 word-wrap 属性 

1) 基本 语法 

word-wrap: normal|break-word; 

2) 语法 说 明 

word-wrap 自动 换行 属性 允许 强制 文本 进行 换行 ， 即 使 这 意味 着 会 对 单词 进行 拆 分 。 
该 属性 有 两 个 值 , 分 别 为 normal、break-word。 其 中 normal 表示 只 在 允许 的 断 字 点 换行 ( 浏 
览 器 保持 默认 处 理 )，break-word 表示 在 长 单词 或 URL 地 址 内 部 进行 换行 。 


4. 文本 溢出 text-overflow 属性 
1) 基本 语法 


text-overflow: cliplellipsislstring7 


2) 语法 说 明 

text-overflow: 属性 规定 当 文 本 溢出 包含 元 素 时 发 生 的 事情 。 该 属性 有 三 个 属性 值 ， 分 
别 为 clip、ellipsis、string。 其 中 clip 表示 修剪 文本 ; ellipsis 表示 显示 省 略 符号 来 代表 被 修 
前 的 文本 ; string 表示 使 用 给 定 的 字符 串 来 代表 被 修剪 的 文本 。 

【 例 13-6-10】CSS3 文本 效果 属性 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 13-52 所 示 。 








1 <!-- edu 13 6 10.html --> 
2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
$5 <meta charset="UTF-8"> 
6 <title>Document</title> 
属 <style> 
8 h2{text-align:center;background:#99ccff;padding:5px auto;} 
9 hl {text-shadow:2px 2px 8px #FF0000;/* 设置 文本 阴影 */} 
0 p-.test{width:1l5em; border:1lpx solid #000000; 
word-wrap:break-word; /* 设置 自动 换行 */} 
2 div.test{white-space:nowrap;/* 规定 文本 不 进行 换行 */ 
时 width:12em;overflow:hidden; border:1lpx solid #000000;} 
4 </style> 
号 </head> 
6 <body> 
7 <h2>CSS3 文 本 效果 </h2> 
8 <h1> 具 有 模糊 效果 的 文本 阴影 </h1> 
9 <p>【 未 设置 换行 和 宽度 的 段落 】This paragraph contains a very long word: 
thisisaveryveryveryveryveryverylongword. The long word will break and wrap to 
the next line.</p> 
20 <p class="test">【 设 置 强制 换行 和 宽度 的 段落 】This paragraph contains a 
very long word: thisisaveryveryveryveryveryverylongword. The long word will 
break and wrap to the next line.</p> 





21 <h3> 下 列 div 包含 长 文本 ， 都 能 正常 显示 </h3> 

有 这 <div id="" class=""> 

23 HTML 5 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 。HTML5 仍 处 于 完善 之 中 。 
然而 ， 大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 支持 。 

24 </div> 

25 <h3> 下 面 商 个 div 包含 无 法 在 框 中 容纳 的 长 文本 。 不 能 完全 显示 , 文本 被 修剪 了 。</h3><hr> 

26 <p> 下 列 div 使 用 "text-overflow:ellipsis" : </p> 

27 <div class="test" style="text-overflow:ellipsis;">HTML 5 的 第 一 


份 正 式 草案 已 于 2008 年 1 月 22 日 公布 。HTML5 仍 处 于 完善 之 中 。 然 而 ， 大 部 分 现代 浏览 器 已 经 具备 了 某 
些 HTML5 支持 。</div> 

28 <h3> 下 列 div 使 用 "text-overflow:clip": </h3> 

29 <div class="test" style="text-overflow:clip;">HTML 5 的 第 一 份 正式 
草案 已 于 2008 年 1 月 22 日 公布 。HTML5 仍 处 于 完善 之 中 。 然 而 ， 大 部 分 现代 浏览 器 已 经 具备 了 某 些 
HTML5 支持 。</div> 

30 </body> 

31 </html> 








HTML5 故 动 与 CSS3 应 局 


第 
13 
章 


Web 育 帝 开交 故 大 一 TIMT5、CSS3、JavaScript ( 筑 3 族 ) 





















i 
| 
| 
hn 

下 列 div 包含 长 文本 ， 都 能 正常 旦 示 
| 下面 两 个 div 包 售 无 法 在 框 中 容纳 的 长 文本 。 不 能 完全 旦 示 , 文本 校 迟 稻 了 . | 
| JW TH 

上 下 列 div 使 用 "text-overflow:clip- : 

HTML 5 的 划一 盼 正式 于 到 
2 | 


图 13-52 CSS3 文本 效果 的 应 用 





13.7 综合 实例 


视频 讲 
以 “HUAWEI CONNECT 2016 全 联接 大 会 ”的 会 议 注册 页 面 为 例 ， 采 用 HIML5 构建 
页 面 。 代 码 如 下 ， 页 面 效 果 如 图 13-53 所 示 。 设 计 要 求 如 下 : 


塑造 云 时 代 ,联接 企业 的 现在 与 未 来 
HUAWEI CONNECT 2016 全 联 扩大 会 


[中国 ,上海 , 2016 年 09 月 1 日 ] 在 HUAWEI CONNECT 2016 全 妖 接 大 会 上 ,华为 [1 产品 妈 怠 的 于 叶 来 
发 表 了 “于 元 对 代 ， 联 浪 企 业 的 现在 与 来” 主题 清江 , 重 鲁 发 有 了 善于 fusionCloud 的 31 钦 去 最 务 
FusionStorage 6.0 云 和 健 与 fusionStage Paa5 干 各 , 并 与 忱 霹 的 宫 户 、 合 作 伙 信 、 活 信 分 煌 冯 入 分享 了 
隶 力 在 本 于 去 对 代 的 可 得 中 各 何 划 助 企 业 tC 寻 去 化 . 近 本 要 条 商业 价值 








隶 力 1T 产 品 经 马 做 于 夺 素 发 表 主 归于 只 
会 M 注 前 页 本 
Ee 我 本 要 日 
If 日 位 #3H 
电子 名 性 得 5 抽 :| 年 /月 /日 
注册 | 时 要 








位 看 什 息 : 菠 3 月 14 日 以 注册 4 代表 自行 隘 订 会 汉 聘 司 39 伍 胡 ， 会 务 关 籽 phylab 人 @fudan edu.cn。 
人 闪 人 和 天 虹 


关闭 100SU 天 所 娃 玫 而 复 避 丰 用 全 电 于 021-51055577 革 于 冲 428 子 
局 9 大 大 天 3 而 证 021-65110356 ， 疾 RO 玫 守 必 才 75 认 


图 13-53 HUAWEICONNECT 2016 全 联接 大 会 注册 页 面 





(1) 整个 页 面 采用 article 标记 构架 。 使 用 header、footer、hgroup、figure、figcaption、 
form、fieldset 等 标记 来 进行 页 面 布局 。 


(2) 会 议 注册 页 面 。 采 用 fieldset、legend 进行 表单 元 素 分 组 。 在 其 中 分 别 采 用 input 
类 型 为 text、email、tel、date、submit、reset 等 来 布局 页 面 ， 注 册 姓 名 、 报 告 题 目 、 工 作 
单位 等 文本 输入 域 不 能 为 空 。 

(3) footer 部 分 中 宾馆 信息 采用 address 标记 进行 布局 。 

1 <!-- edu 13 7 1.html --> 

2 <!doctype html> 

3 <html lang="en"> 


4 <head> 

<meta charset="UTF-8"> 
<title>HTML5 表 单 </title> 
<style type="text/css"> 


Coa 





img:hover{transform:rotate (30deg) ; /* 和 鼠标 盘旋 时 ， 旋 转 30”*/} 


</style> 


10 </head> 


tL <body> 
<article style="margin:20px auto;width:850px;height:900px; background: 


12 


#eeeeee;padding:30px;"> 


13 
14 
15 
16 
E 


<header> 
<hgroup> 
<h1> 塑 造 云 时 代 ， 联 接 企 业 的 现在 与 未 来 </h1> 
<h3>HUAWEI CONNECT 2016 全 联接 大 会 </h3> 
<p style="text-indent:2em;">[ 中 国 ， 上海, <time datetime= 


"2016-09-01">2016 年 09 月 1 日 </time>] 在 HUAWEI CONNECT 2016 全 联接 大 会 上 ， 华 为 IT 产品 线 
总 裁 郑 叶 来 发 表 了 "塑造 云 时 代 , 联接 企业 的 现在 与 未 来 “主题 演讲 , 重 磅 发 布 了 基于 FusionCloud 的 31 
款 云 服 务 、FusionStorage 6.0 云 存储 与 FusionStage PaaS 平 台 ， 并 与 现场 的 客户 、 合 作 伙伴 、 媒 
体 、 分 析 师 等 分 享 了 华为 在 塑造 云 时 代 的 过 程 中 如 何 帮助 企业 加 速 云 化 ， 挖 掘 更 多 商业 价值 。</P> 


18 
19 
20 
</figcaption> 
21 
22 
23 
24 
25 
26 
27 
28 
229 
30 
31 
32 
33 
34 
35 
36 
37 


<figure style="text-align:center;"> 
<img src="huawei it.jpg" width="500" border="0" ><br> 
<figcaption> 华 为 IT 产 品 线 总 裁 郑 叶 来 发 表 主题 演讲 


</figure> 
</hgroup> 
</header> 
<form method="post" action=""> 
<fieldset style="text-align:center;margin:10px 40px;"> 
<legend> 会 议 注册 页 面 </legend> 
注册 姓名 : <input type="text" name="" required> 报告 题目 : 
<input type="text" name="" required><br> 工作 单位 : 
<input type="text" name="" required> 手机 号 码 : 
<input type="tel"><br> 电子 邮件 : 
<input type="email" name=""> 报到 时 间 : 
<input type="date" /><br> 
<input type="submit" value=" 注 册 "><input type="reset"> 
</fieldset> 
</form> 
<footer> 


<p> 住 宿 信息 : 请 3 月 14 日 以 后 注册 的 代表 自行 预订 会 议 期 间 的 住宿 。 会 务 邮 





箱 phylab@fudan.edu.cn。</p> 


38 


<p> 给 您 推荐 的 宾馆 :<address> 邯 郸 路 100 号 如 家 快捷 酒店 (复旦 店 ) 酒店 


电话 021-51055577 国 定 路 428 号 ; <br> 同舟 大 厦 酒店 电话 021-65110356 。 两 家 宾馆 距离 学 校 
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都 非常 近 ， 步 行 5 分 钟 之 内 。</address></p> 


39 </footer> 
40 </article> 

41 </body> 

42 </html> 


代码 中 第 8 行 给 图 像 定 义 了 鼠标 盘旋 时 样式 (旋转 30”)。 第 12 一 40 行为 一 个 article 
标记 区 。 第 13 一 23 行为 header 标记 区 ， 采 用 hgroup 标记 来 布局 ， 其 中 第 18 一 21 行 采 用 
figure 和 figcaption 标记 组 合 标注 图 像 及 标题 。 第 24 一 35 行为 表单 注册 区 域 ， 分 别 对 相关 
输入 域 进行 合法 性 检查 设置 。 第 36 一 39 行为 footer 标记 区 域 。 


本 章 小 结 


章 介 绍 了 HTMLS5 新 特性 和 一 些 基 础 的 HTMLS 的 应 用 。 重 点 讲述 HTMLS5 的 新 增 

属性 、 新 增 表单 属性 、 新 增 表单 的 input 类型、 媒体 元 素 〈 视 频 、 音 频 ) 等 方面 的 知识 和 
程序 设计 技巧 。 

HTML5 新 增 了 header、nav、article、section、aside、footer 等 结构 元 素 ,使 用 这 些 语 义 
的 标记 构建 网 页 更 为 方便 、 快 捷 。HTMLS5 新 增 的 其 他 页 面 元 素 也 极 大 地 丰富 了 页 面 内 容 
与 表现 ,结合 JavaScript 脚本 能 够 设计 具有 更 好 的 用 户 体 验 的 网 站 。HTMLS5 技术 在 移动 互 
联网 时 代 会 具有 更 加 杰出 的 表现 。 

运用 CSS3 新 增 转换 、 过 渡 和 动画 特性 可 以 增强 页 面 的 表现 效果 。 运 用 CSS3 多 列 属 
性 、 文 本 效果 属性 可 以 美化 页 面 排 版 效果 。 





[Ky 
练习 与 实验 
练习 13 
1. 选择 题 
(1) HTML5 之 前 的 HTML 版 本 是 ( % 
A. HIML49 CB. HIML4 C. HTML4.01 D. HIML4.1 


(2) HTMLS5 的 正确 doctype 是 ( )。 
A. <!IDOCTYPE html> 
B. <!IDOCTYPE HIML5S> 
C. <IDOCTYPE HIML PUBLIC "-/W3C/DTD HIML 5.0//EN" "http://www.w3. 
org/TR/html$/strict.dtd"> 
D. 以 上 都 不 是 
(3) 在 HIML5 中 ， 属 于 组 合 标题 标记 是 i 
A. <group> B. <header> C. <headings> DD. <hgroup> 
(4) 用 于 播放 HIMLS 视频 文件 的 正确 HIMLS 元 素 是 ( )。 
A. <media> B. <audio> C. <video> D. <movie> 


(5) 在 HTML5 中 ， 规 定 输入 字段 是 必 填 的 属性 是 ( 和 





A. required B. formvalidate C. validate D. placeholder 
(6) 下 列 属于 输入 类 型 为 定义 滑 块 控件 的 是 〈 法 

A. search B. controls C. slider D. range 
(7) 下 列 输入 类 型 用 于 定义 周 和 年 控件 (无 时 区 ) 的 是 ( 5 

A. date B. week C. year D. time 
(8) 下 列 HIMLS 元 素 用 于 显示 已 知 范围 内 的 标量 测量 的 是 疙 

A. <gauge> B. <range> C. <measure> D. <meter> 
(9) 下 列 属性 中 表示 CSS3 的 过 渡 的 属性 是 〈 入 

A. animation B. transform C. transition D. box-shadow 


(10) 下 列 属 性 中 能 够 设置 圆 角 边框 的 属性 的 是 ( ”)。 

A. box-shadow B. border-image C. border-style D. border-radius 
(11) 下 列 属性 中 不 是 过 渡 transition 子 属性 的 是 和 

A. transition-property B. transition-delay 





C. transition-play D. transition-duration 
(12) 下 列 选项 中 定义 动画 animation 的 关键 帧 的 是 (。”)。 
A. @keyframes B. keyfrmaes C. @importurl() D. @keyframe 
2. 填空 题 
(1) 数据 列表 选项 datalist 标记 通常 与 “标记 结合 在 一 起 使 用 , 通过 该 标记 _ 





属性 与 datalist 标记 的 属性 关联 。 

(2) HIMLS 新 增 媒体 元 素 除 了 通过 属性 可 以 加 载 媒体 文件 URL 外， 还 可 以 通 
过 标记 加 载 不 同 格式 的 媒体 文件 ， 以 满足 浏览 器 支持 的 需要 。 

(3) HTML5 新 增 类 型 的 input 元 素 可 以 拾取 颜色 ; 新 增 类 型 的 
input 元 素 可 以 对 邮箱 进行 自动 验证 ;新 增 ” 类 型 的 input 元 素 可 以 产生 滑动 条 控件 ; 
新 增 类 型 的 input 元 素 可 以 产生 带 有 微调 按钮 的 输入 域 。 

(4) HIML5 新 增 表单 元 素 可 以 产生 数据 加 密 ; 新 增 表单 元 素 可 
以 产生 不 同类 型 的 输出 。 新 增 表单 元 素 可 以 定义 选项 列表 。 

3. 简 答题 


(1) 简 述 HTML5 文档 结构 的 基本 组 成 。 
(2) 简 述 HTML5 的 八大 特性 。 
(3) 简 述 CSS3 动画 与 CSS3 过 渡 的 区 别 。 


实验 13 

1. 采用 HTML5 和 CSS3 多 列 设计 一 个 简易 的 HIMLS 页 面 ， 效 果 如 图 13-54 所 示 。 
具体 要 求 如 下 : 

(1) 整个 页 面 采用 article 标记 构架 。 

(2) 使 用 header、figure、figcaption、footer、hgroup 等 标记 来 进行 页 面 布局 。 


(3) 标题 采用 CSS 文本 阴影 。 第 
(4) 程序 名 称 为 exp_13_1.html。 3 
章 
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提前 探班 : HUAWEI CONNECT 2016 大 透析 


为 什么 华为 要 自主 办 HUAWEI CONNECT 施 舰 大 会 了 
La LNA vi 


个 IN 
= 自 





于 华为 历史 的 发 展 , 他 表 活动 。 比 tHCC( 毕 为 去 为 以 为 作为 一 场 旋 规 大 会 的 洞察 , 为 行 
示 : "华为 发 展 的 过 程 ， 计算 大 会 、HNC( 人 为 网 应 该 邱 有 行业 最 前 治 的 内 要 提供 一 个 两 业 与 战略 对 


我 认为 可 以 分 为 三 个 阶 络 大 会 |、HDC( 毕 为 开发 容 , 能 吸引 各 类 型 、 各 层 话 平台 ,全 方位 构建 华为 
段 , 第 一 个 阶段 , 华为 主 者 大 会 等. 第 三 个 阶段， 级 的 行业 领 油 和 精 天 参 的 行业 领导 力 。 华 为 将 这 
要 参加 行业 组 织 和 外 部 机 华为 开始 筹划 组 织 会 , 成 为 企业 高 层 商 业 与 次 大 会 打造 成 一 次 生态 大 
构 举办 的 活动 ， 比 如 每 年 HUAWEI CONNECT 这 样 战 巾 的 交流 平台 。“ 会 ,与 窗户 、 合 作 伙 伴 、 


的 巴 展 、CeBIT 和 interop 的 旗舰 大 会 。 华 为 希望 通 同时 ， 徐 文 伟 拓 产业 组 织 、 开 发 者 共同 引 
等 等 第 二 个 阶段 , 随 着 过 构筑 平台 开放 能 力 ,最 出 ; “在 这 次 HUAWEL 领 并 推动 产业 发 可 ,发布 
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图 13-54 HTML5 与 CSS3 多 列 应 用 页 面 


2. 将 【 例 13-6-8】 中 div 沿 对 角 线 运动 改 为 沿 矩 形 边 框 运动 。 要 求 沿 每 条 边 运 动 时 改 





第 14 章 JavaScript 基础 





本 章 学 习 目标 


采用 HTML+CSS 技术 设计 的 网 页 具有 信息 丰富 、 呈 现 样式 美观 等 优势 ， 但 是 网 页 还 
是 缺乏 与 用 户 的 交互 功能 。 例 如 在 网 页 中 使 用 表单 采集 用 户 信息 ， 需 要 对 表单 中 输入 的 各 
类 信息 进行 有 效 性 验证 ， 需 要 不 断 地 向 服务 器 端 发 送 请 求 ， 一 旦 服务 器 响应 不 及 时 ， 导 致 
网 络 访问 中 断 ， 就 有 可 能 损失 一 个 潜在 的 用 户 或 一 定 的 潜在 市 场 份额 ， 这 对 商家 来 说 无 疑 
是 一 大 损失 。JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚 本 语言 ， 
主要 目的 是 为 服务 器 端 脚本 语言 提供 数据 验证 的 基本 功能 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 理解 JavaScript 程序 的 概念 与 作用 。 

。 掌握 JavaScript 标识 符 和 变量 的 概念 及 其 使 用 方法 。 

。 掌握 JavaScript 常用 运算 符 和 表达 式 概念 。 

。 掌握 JavaScript 中 顺序 、 分 支 、 循 环 三 种 程序 控制 结构 语法 。 

。 掌握 JavaScript 函数 的 定义 方法 ， 并 学 会 使 用 。 

。 学 会 综合 运用 JavaScript 设计 具有 动态 、 交 互 功能 的 网 页 。 


JavaScript 是 目前 非常 流行 ,应 用 广泛 的 一 门客 户 端 脚本 语言 ,在 2017 年 11 月 的 Tiobe 
(The Importance Of Being Eamest) 编程 语言 排行 榜 中 ，JavaScript 排名 第 6 位 。JavaScript 
是 一 种 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚本 语言 ， 被 广泛 应 用 于 各 种 客户 
端 Web 程序 开发 中 ， 尤 其 是 HTML 的 开发 ， 能 给 HTML 网 页 添加 动态 功能 ， 响 应 用 户 各 
种 操作 ,实现 诸如 信息 验证 、 数 字 日 历 、 跑马 灯 、 显 示 浏 览 器 停留 时 间 等 的 特殊 功能 和 效果 。 


14.1 _ JavaScript 概述 





JavaScript 由 Netscape 公司 的 Brendan Eich ( 布 兰 登 , 艾 奇 ) 于 1995 年 开发 设计 ， 最 初 
命名 为 LiveScript， 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语言 。 后 来 Netscape 与 Sun 公司 进 
行 合作 ， 将 LiveScript 改名 为 JavaScript。JavaScript 在 设计 之 初 受到 Java 的 启发 ， 语 法 上 
与 Java 有 很 多 类 似 之 处 ， 并 借用 了 许多 Java 的 名 称 和 命名 规范 。 


14.1.1 JavaScript 简介 


JavaScript 主要 运行 在 客户 端 ， 用 户 访问 带 有 JavaScript 的 网 页 ， 网 页 里 的 JavaScript 


Web 育 弦 开交 才 大 一 TIMT5、CSS3、JavaScript ( 荔 了 猎 ) 





程序 就 传 给 浏览 器 ， 由 浏览 器 解释 和 处 理 。 表 单数 据 有 效 性 验证 等 互动 性 功能 ， 都 是 在 客 
户 端 完 成 的 ， 不 需要 和 Web 服务 器 发 生 任何 数据 交换 ， 因 此 ， 不 会 增加 Web 服务 器 的 
负担 。 

JavaScript 具有 如 下 特点 。 

1. 简单 性 

JavaScript 是 一 种 脚本 编程 语言 ,采用 小 程序 段 的 方式 实现 编程 , 像 其 他 脚本 语言 一 样 ， 
JavaScript 是 一 种 解释 性 语言 ， 因 此 JavaScript 编写 的 程序 无 须 进 行 编 译 ， 而 是 在 程序 运行 
过 程 中 被 逐 行 地 解释 。JavaScript 基于 Java 基本 语句 和 控制 流 ， 学 习 过 Java 的 编程 人 员 非 
常 容易 上 手 。 此 外 它 的 变量 类 型 采用 弱 类 型 ， 未 使 用 严格 的 数据 类 型 安全 检查 。 

2. 安全 性 

JavaScript 是 一 种 安全 性 语言 , 它 不 允许 程序 访问 本 地 的 硬盘 资源 , 不 能 将 数据 存 入 到 
服务 器 上 , 不 允许 对 网 络 文档 进行 修改 和 删除 , 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 
从 而 有 效 地 保障 数据 的 安全 性 。 

3. 动态 性 

JavaScript 可 以 直接 对 用 户 的 输入 信息 进行 简单 处 理 和 响应 ， 而 无 须 向 Web 服务 程序 
发 送 请 求 再 等 待 响应 。JavaScript 的 响应 采用 事件 驱动 的 方式 进行 ， 当 页 面 中 执行 了 某 种 操 
作 时 会 产生 特定 事件 (Event)， 例 如 移动 鼠标 、 调 整 窗口 大 小 等 ， 会 触发 相应 的 事件 响应 
处 理 程序 。 

4. 跨 平台 性 

JavaScript 程序 运行 只 依赖 于 浏览 器 , 与 操作 系统 和 机 器 硬件 无 关 , 只 要 机 器 上 安装 支 
持 JavaScript 的 浏览 器 (例如 Internet Explorer、Firefox、Chrome 等 ) 都 能 正确 运行 。 
14.1.2 第 一 个 JavaScript 程序 

JavaScript 程序 不 能 独立 运行 ， 必须 依赖 于 HTML 文件 。 通常 将 JavaScript 代码 放置 在 
script 标记 内 ， 由 浏览 器 JavaScript 脚本 引擎 来 解释 执行 。 

1. 基本 语法 


1 <script type="text/javascript" [src=" 外 部 js 文件 "] > 
2 ”js 语句 块 ; 
3 </script> 





2. 语法 说 明 

script 标记 是 成 对 标记 ， 以 <scrip 亿 开始， 以 </scrip 亿 结束 。type 属性 说 明 脚本 的 类 型 ， 
属性 值 “text/javascript” 意 思 是 使 用 JavaScript 编写 的 程序 是 文本 文件 。src 属性 是 可 选 属 
性 ， 用 于 加 载 指定 的 外 部 js 文件 。 如 果 设 置 此 属性 ， 将 忽略 script 标记 内 的 所 有 语句 。 

script 标记 既 可 以 放 在 HTML 的 头 部 ， 也 可 以 放 在 HTML 的 主体 部 分 ， 只 是 装载 的 时 
间 不 同 。script 标记 还 有 另 一 种 说 明 格 式 ， 如 下 所 示 : 


<script language="javascript"[src=" 外 部 js 文件 "] >..</script> 


【 例 14-1-1】 使 用 JavaScript 向 HIML 页 面 输出 信息 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 
14-1 所 示 。 
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第 一 个 JavaScrip 实 例 ! 























图 14-1 第 一 个 JavaScript 实例 
1 <!-- edu 14 1 1.html --> 


2 <!doctype html> 
3 <html] lang="en"> 





4 <head> 
与 <meta charset="UTF-8"> 视频 讲解 
6 <title> 第 一 个 JavaScript 实 例 </title> 

7 </head> 

8 <body> 

9 <script type="text/javascript"> 

10 document .write ("第 一 个 JavaScript 实 例 !"); 

了 </script> 

12 </body> 

13 </html> 

3. 代码 解释 


代码 中 第 9 一 11 行 在 body 标记 中 直接 插入 script 标记 ， 第 10 行 在 script 标记 内 利用 
document writeO) 命 令 向 页 面 写 入 “第 一 个 JavaScript 实例 !”。 


14.1.3 JavaScript 放置 的 位 置 


JavaScript 代码 一 般 放置 在 页 面 的 head 或 body 部 分 。 当 页 面 载 入 时 , 会 自动 执行 位 于 
body 部 分 的 JavaScript,【 例 14-1-1】 即 是 如 此 ;而 位 于 head 部 分 的 JavaScript 只 有 被 显 式 
调用 时 才 会 被 执行 ， 如 【 例 14-1-2】 所 示 。 

1. head 标记 中 的 脚本 

script 标记 放 在 头 部 head 标记 中 , JavaScript 代码 必须 定义 成 函数 形式 , 并 在 主体 body 
标记 内 调用 或 通过 事件 触发 。 放 在 head 标记 内 的 脚本 在 页 面 装载 时 同时 载 入 ,这样 在 主体 
body 标记 内 调用 时 可 以 直接 执行 ， 提 高 了 脚本 执行 速度 。 

1) 基本 语法 

1 function functionname (参数 1, 参数 2,. . . ,参数 n) { 

2 函数 体 语句 ; 

31} 

2) 语法 说 明 

JavaScript 自 定义 函数 必须 以 function 关键 字 开 始 ， 然 后 给 自 定义 函数 命名 ， 函 数 命名 
时 一 定 遵守 标识 符 命名 规范 。 函 数 名 称 后 面 一 定 要 有 一 对 括号 “0”， 括 号 内 可 以 有 参数 ， 
也 可 以 无 参数 ， 多 个 参数 之 间 用 逗号 “,” 分 隔 。 函 数 体 语句 必须 放 在 大 括号 “他 ”内 。 

【 例 14-1-2】 在 head 标记 内 定义 两 个 JavaScript 函数 。 代 码 如 下 所 示 ， 页 面 效果 如 图 
14-2 所 示 。 8 





1 <!== adu 14 1 2.html ——> 3 
2 <!doctype html> 回 


3 <html lang="en"> 2 
4 <head> 视频 讲解 





JavaScript 去 矶 
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5 <meta charset="UTF-8"> 
6 <title>head 中 定义 的 JS 函数 </title> 
于 <script type="text/javascript"> 
8 function message (){ 




















9 alert ("调用 Js 函 数 ! sum(100,200)="+sum(100,200)); } 
10 function sum(x,y) {return x+y;// 返 回 函数 计算 结果 } 
1 </script> 
12 </head> 
13 <body> 
14 <h4>head 标 记 内 定义 两 个 JS 函 数 </h4> 
15 <p> 无 返回 值 函 数 : message ()</p> 
16 <p> 有 返回 值 函 数 : sum (x, y) </p> 
于 这 <form> 
18 <input name="btnCallJS" type="button" onclick="message();" 
value=" 计 算 并 显示 两 个 数 的 和 "> 
19 </form> 
20 </body> 
21 </html> 
[eIs[ w] 
é a jE webmist BD - ox | head 中 十 X 的 )S 昌 数 <j 介 安 况 


head 标 记 内 定义 两 个 JS 函数 | 9% 
| 顽固 什 男 数 ，message0 
| 有 返回 值 函 数 ，sum(x.y) 


证 下着 旺 示 两 个 类 的 和 es 
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图 14-2 调用 head 标记 中 定义 的 JavaScript 函数 





3) 代码 解释 

代码 中 第 7 一 11 行 在 head 部 分 插入 script 标记 ， 在 script 标记 内 定义 JavaScript 函数 
message()、sum(x,y)。 第 9 行 用 alert 函数 调用 告警 消息 框 ， 并 调用 sum(100.200) 函 数 ， 计 
算出 结果 并 输出 相关 信息 ; 第 18 行 定义 了 一 个 普通 按钮 btnCallJS， 当 单 击 该 按钮 时 触发 
按钮 的 onclick 事件 ， 调 用 在 head 部 分 定义 的 message 函数 ， 弹 出 告警 框 。 

2. body 标记 中 的 脚本 

script 标记 放 在 主体 body 标记 中 ，JavaScript 代码 可 以 定义 成 函数 形式 ， 在 主体 body 
标记 内 调用 或 通过 事件 触发 。 也 可 以 在 script 标记 内 直接 编写 脚本 语句 ， 在 页 面 装载 时 同 
时 执行 相关 代码 , 这 些 代码 执行 的 结果 直接 构成 网 页 的 内 容 , 在 浏览 器 中 可 以 查看 , 如 【 例 
14-1-1】 所 示 。 

3. 外 部 js 文件 中 的 脚本 

除了 将 JavaScript 代码 写 在 head 和 body 部 分 以 外 , 也 可 将 JavaScript 函数 单独 写成 一 
个 js 文件 ， 在 HTML 文档 中 引用 该 js 文件。 

【 例 14-1-3】 调 用 外 部 js 文件 中 的 JavaScript 函数 。 代 码 如 下 所 示 ， 页 面 效果 如 图 14-3 
所 示 。 





< 一 一 emo.js 一 -> 
function message () 


1 
2 
人 3 
3 y alert ("调用 外 部 js 文件 中 的 函数 ! ") ; 视频 讲解 





上 述 代码 将 JavaScript 函数 写 在 一 
数 message(0， 注 意 在 “js 
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图 14-3 ”调用 外 部 js 文件 的 JavaScript 函数 


1 < Gu 14 1 tml -> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 调 用 外 部 js 文件 的 JavaScript 函 数 </title> 
过 
8 
9 </script> 
10 </head> 
11 <body> 
12 <form> 
13 
value=" 调 用 外 部 js 文件 的 gavaScript 函 数 "> 
14 </form> 
15 </body> 
16 </html> 


<script type="text/javascript" src="demo.js"> 


document .write ("这 条 语句 没有 执行 ， 被 忽略 掉 了 ! "); 


”文件 中 不 需要 使 用 <script></scrip 亿 标记 来 包 目 


个 文件 demojs 中 ， 代 码 中 第 2 一 5 行 定义 了 一 个 函 





目 代 码 。 


<input name="btnCal1JS" type="button" onclick="message()" 


上 述 代码 中 第 7 行 引用 外 部 的 demojjs 文件 ; 第 13 行 定义 普通 按钮 ， 在 单 击 按钮 时 触 
发 onclick 事件 , 执行 demojjs 中 定义 的 message0 函 数 实现 在 页 面 上 弹出 告警 框 的 功能 。 很 
了 代码 没有 被 执行 ， 因 为 设置 src 属性 后 ， 脚 本 <script></scrip 亿 标记 之 间 所 有 语 
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句 都 不 会 执行 ， 所 以 没有 在 页 面 上 输入 信息 。 


4. 事件 处 理 的 代码 中 的 脚本 
JavaScript 代码 除 上 述 三 种 放置 位 置 外 ， 还 可 直接 写 在 事件 处 理 代码 中 。 
【 例 14-1-4】 调 用 直接 写 在 事件 处 理 代 码 中 JavaScript 程序 。 代 码 如 下 所 示 ， 更 及 
如 图 14-4 所 示 。 
1 <!-- edu 14 1 4.html --> 


2 <!doctype html> 
3 <html lang="en"> 


OvwoJaAp 


<head> 
<meta charset="UTF-8"> 


<title> 直 接 在 事件 处 理 代码 中 加 入 JavaScript 代 码 </title> 


</head> 
<body> 
<form> 





视频 讲解 


<input type="button" onclick="alert(' 直 接 在 事件 处 理 代码 中 加 入 
JavaScript 代 码 ')"” value=" 直 接 调 用 JavaScript 代 码 "> 


</form> 


JavaScript 奉 础 
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12 </body> 
13 </html> 
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图 14-4 直接 在 事件 处 理 代 码 中 加 入 JavaScript 代码 


上 述 代 码 中 第 10 行 直接 在 普通 按钮 的 onclick 事件 中 插入 了 JavaScript 代码 ， 注 意 
JavaScript 代码 需要 用 双 引 号 〈"") 引起 来 ， 单 击 该 按钮 时 弹出 告警 框 。 
用 浏览 器 打开 JavaScript 程序 时 ， 安 全 级 别 设置 较 高 的 浏览 器 会 阻止 程序 的 运行 ， 如 
图 14-5 所 示 。 单 击 提示 信息 ， 弹 出 上 下 文 菜单 ,选择 “人 允许 阻止 的 内 容 ” 选项 ， 方 可 运行 。 











图 14-5 浏览 器 阻止 程序 运行 界面 


14.2 ”JavaScript 程序 


JavaScript 程序 由 语句 、 语 句 块 、 函 数 、 对 象 、 方 法 、 属 性 等 构成 ， 通 过 顺序 、 分 支 和 
循环 三 种 基本 程序 控制 结构 来 进行 编程 。 


14.2.1 语句 和 语句 块 


JavaScript 语句 向 浏览 器 发 出 的 命令 。 语句 的 作用 是 告诉 浏览 器 该 做 什么 。 如 下 面 语句 
的 作用 是 告诉 浏览 器 在 页 面 上 输出 “我 是 JavaScript 程序 !”。 


document .write (" 我 是 JavaScript 程 序 ! ") 


多 行 JavaScript 语句 可 以 组 合 起 来 形成 语句 块 ， 语 句 块 以 左 大 括号 “{” 开 始 ， 以 右 大 
括号 “}” 结 束 ， 块 的 作用 是 使 语句 序列 一 起 执行 。 下 面 语句 块 向 网 页 输出 一 个 标题 以 及 两 
个 段落 。 

1 <script type="text/javascript"> 

2 4 

3 document .write ("<h1> 标 题 1</h1>"); 


4 document .write ("<p> 这 是 段落 1</p>"); 
5 document .write ("<p> 这 是 段落 2</p>"); 
6 } 

7 </script> 


14.2.2 代码 


JavaScript 代码 是 JavaScript 语句 的 序列 ， 由 若干 条 语句 或 语句 块 构成 ， 以 下 代码 中 第 
2 一 7 行 由 语句 和 语句 抉 构成 的 就 是 JavaSeript 代码 。 





1 <script type="text/javascript"> 

2 var color="red"; 

3 if(color=="red") 

4 { 

5 document .write ("颜色 是 红色 !"); 
6 alert ("颜色 是 红色 !"); 

时 } 

8 </script> 


14.2.3 消息 对 话 杠 


JavaScript 中 的 消息 对 话 框 分 为 告警 框 、 确 认 框 和 提示 框 三 种 。 

1. 告警 杠 

alert0 函 数 用 于 显示 带 有 一 个 图 标 、 一 条 指定 消息 和 一 个 “确定 ”按钮 的 告警 框 。 
1) 基本 语法 


alert (message); 


2) 参数 说 明 
message 参数 是 显示 在 弹出 对 话 框 窗口 上 的 纯 文本 ( 非 HTML 文本 )。 
【 例 14-2-1】 输 出 告警 消息 。 代 码 如 下 所 示 ， 页 面 效果 如 图 14-6 所 示 。 





这 是 message 
这 是 按钮 EE 
这 是 图 标 视频 讲解 
图 14-6 告警 框 界面 图 
1 <!-- edu 14 2 1.html --> 
2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 告 警 消息 框 的 应 用 </title> 
7 </head> 
8 <body> 
9 <script type="text/javascript"> 
10 alert ("这 是 告警 消息 框 ! ") ; 
11 </script> 第 
12 </body> 
13 </html> 14 
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3) 代码 解释 
代码 中 第 10 行使 用 alert0 函 数 在 页 面 弹出 告警 消息 框 。 
2. 确认 框 


confirm0 方 法 用 于 显示 带 有 一 个 图 标 、 指 定 消息 和 “确定 ”及 “取消 ”按钮 的 对 话 框 。 
1) 基本 语法 


confirm(message); 


2) 语法 说 明 

如 果 用 户 单 击 “ 确 定 ” 按 钮 , 则 confirm0 返 回 true。 如 果 单 击 “ 取 消 ” 按 钮 , 则 confirm() 
回 false。 在 用 户 单 击 “ 确 定 ” 按 钮 或 “取消 ”按钮 关闭 对 话 框 之 前 ， 它 将 阻止 用 户 对 浏 
器 的 所 有 操作 。 在 调用 confirm0O 时 ， 将 暂停 对 JavaScript 代码 的 执行 ， 在 用 户 做 出 响应 
前 ， 不 会 执行 下 一 条 语句 。 

3) 参数 说 明 

message 参数 是 显示 在 弹出 对 话 框 窗口 上 的 纯 文 本 〈 非 HIML 文本 )。 

【 例 14-2-2】 使 用 JavaScript 确认 框 。 代 码 如 下 所 示 ， 页 面 效果 如 图 14-7 所 示 。 


1 <!-- edu 14 2 2.html --> 
2 <!doctype html> 
3 <html lang="en"> 











4 <head> 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 确 认 框 的 应 用 </title> 

4 <script type="text/javascript"> 

8 function show confirm(){ 

9 var tf=confirm(" 请 选择 按钮 !") ; 

10 if (tf==true) {alert ("您 按 了 确定 按钮 ");  } 

11 else {alert ("您 按 了 取消 按钮 ! ") ;} 

12 } 

a </script> 


14 </head> 
15 <body> 


16 <form method="post" action=""> 

17 <input type="button" onclick="show_confirm() "value=" 显 示 确 认 框 "/> 
18 </form> 

19 </body> 

20 </html> 


/确认 框 使 用 实例 




















图 14-7 确认 框 使 用 界面 图 


4) 代码 解释 
代码 中 第 8 一 12 行 定义 JavaScript 函数 show_confirm(); 第 9 行 调用 confirm0 函 数 显 


示 一 个 确认 框 ; 第 10 一 11 行使 用 双 分 支 结构 ， 如 选择 “确定 ”按钮 则 弹出 告警 框 显 示 “ 您 
按 了 确定 按钮 !”， 和 否则 弹出 告警 框 显 示 “ 您 按 了 取消 按钮 !”。 第 17 行 在 表单 中 插入 一 个 按 
钮 ， 并 定义 按钮 的 onclick 事件 ， 当 用 户 单 击 按钮 时 调用 show_confirm() 函 数 。 

3， 提示 框 

prompt0 方 法 用 于 提示 用 户 在 进入 页 面前 输入 某 个 值 。 

1) 基本 语法 

prompt ("提示 信息 ", 默认 值 ) ; 


如 果 用 户 单 击 提示 框 的 取消 按钮 ， 则 返回 null。 如 果 用 户 单 击 确定 按钮 ， 则 返回 文本 
输入 框 中 输入 的 值 。 在 用 户 单 击 “ 确 定 ” 按 钮 或 “取消 ”按钮 关闭 对 话 框 之 前 ， 它 将 阻止 
用 户 对 浏览 器 的 所 有 操作 。 在 调用 promptO 时 , 将 暂停 对 JavaScript 代码 的 执行 ,在 用 户 做 
出 响应 之 前 ， 不 会 执行 下 一 条 语句 。 

2) 参数 说 明 

该 函数 有 两 个 参数 。 第 1 个 是 “提示 信息 ”第 2 个 是 文本 框 的 默认 值 ， 可 以 修改 。 

【 例 14-2-3】 使 用 JavaScript 提示 框 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-8 所 示 。 


1 <!-- edu 14 2 3.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 提 示 框 的 应 用 </title> 

7 <script type="text/javascript"> 

8 function disp prompt (){ 

9 var name=prompt ("请 输入 您 的 姓名 "," 李 大 为 ") ; 

10 if (name!=null && name!="") // 既 不 为 室 ， 也 不 为 nul1 

11 { 

12 document .write ("您 好 , " + name + "!1"); 

Ee } 

14 } 

15 </script> 


16 </head> 
17 <body> 


18 <form method="post" action=""> 

19 <input type="button" onclick="disp_prompt () "value=" 显 示 提 示 框 "/> 
20 </form> 

总 </body> 

22 </html> 








Ow 十 D+ Ox|GrmngA 
Explorer 用 提示 一 二 


请 输入 您 的 姓名 = 四 
本 您 好 ,地 大 为 


图 14-8 ”提示 框 使 用 界面 图 


3) 代码 解释 第 
代码 中 第 8 一 14 行 定义 JavaScript 函数 disp_promptO; 第 9 行使 用 promptO 函 数 调用 提 
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示 框 ， 让 用 户 输入 姓名 ， 假 设 用 户 输入 姓名 为 李 大 为 ， 则 第 12 行 在 页 面 输出 信息 “您 好 ， 
李 大 为 1”。 i 


14.2.4 JavaScript 注释 






JavaScript 提供 了 两 种 类 型 的 注释 : 单行 注释 和 多 行 注释 。 单 行 注释 使 用 视频 讲解 
“/” 作 为 注释 标记 ， 可 以 单独 一 行 或 跟 在 代码 末尾 ， 放 在 同一 行 中 ,“/” 后 为 注释 内 容 部 
分 。 注 释 行 数 较 少 时 适宜 使 用 单行 注释 ， 如 果 注 释 行 数 较 多 ， 则 需要 在 每 行 的 开头 加 “/”%， 
比较 麻烦 ， 此 时 应 使 用 多 行 注释 。 多 行 注释 能 包含 任意 行 数 的 注释 文本 ， 以 “/#*” 标 记 开 
始 ， 以 “*/” 标 记 结 束 ， 两 个 标记 之 间 所 有 的 内 容 都 是 注释 文本 。 所 有 注释 的 内 容 将 被 济 
览 器 忽略 ， 不 影响 页 面 效 果 和 程序 执行 ， 对 以 后 阅读 和 维护 程序 十 分 方便 。 

如 果 在 某 行 代码 前 面 加 上 单行 注释 “//” 符 号 ， 那 么 此 行 代码 就 不 能 执行 。 对 程序 调 
试 非常 有 用 。 例 如 : 


1 <!-- edu 14 2 4.html --> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
5 <meta charset="UTF-8"> 
6 <title> 注 释 的 应 用 </tit1le> 
7 </head> 
8 <body> 
9 <script type="text/javascript"> 
10 // 这 是 单行 注释 
11 /* 
12 这 是 多 行 注释 
4 可 以 包含 多 行内 容 
14 */ 
45 //alert (" 此 语句 不 执行 ! ") 
16 alert ("此 语句 执行 了 !") ;// 执 行 时 弹出 告警 消息 框 
9 </script> 
18 </body> 
19 </html> 


14.3 ”标识 符 和 变量 


在 任何 一 种 编程 语言 中 ， 实 际 编程 时 都 要 使 用 变量 来 存储 常用 的 数据 。 所 谓 变 量 ， 顾 
名 思 义 ， 就 是 在 程序 运行 过 程 中 不 断 变化 的 量 。 为 了 便于 变量 的 使 用 ， 在 使 用 时 需要 给 变 
量 命名 ， 变 量 的 名 字 则 称 为 标识 符 。 


14.3.1 命名 规范 


1. 标识 符 

标识 符 是 计算 机 语言 中 用 来 表示 变量 名 、 函 数 名 等 的 有 效 字符 序列 ， 简 单 来 说 ， 标 识 
符 就 是 一 个 名 字 ，JavaScript 关于 标识 符 的 规定 如 下 : 

(1) 必须 以 英文 字母 或 者 下 夯 线 开头 。 

(2) 必须 由 英文 字母 、 数 字 、 下 画 线 组 成 ， 不 能 出 现 空格 或 制 表 符 。 





(3) 不 能 使 用 JavaScript 关键 字 与 JavaScript 保留 字 。 
(4) 不 能 使 用 JavaScript 语言 内 部 的 单词 ， 例 如 Infinity、NaN、undefined 等 。 
(5) 大 小 写 敏感 ， 如 name 和 Name 是 不 同 的 两 个 标识 符 。 
根据 以 上 规则 ， 判 断 下 列 标识 符 命名 是 否 是 合法 的 。 











合法 的 标识 符 : Hello _ javascript、_12th、 
不 合法 的 标识 符 : if、3Com、case、switch、 


2. 关键 字 


关键 字 是 JavaScript 中 已 经 被 赋予 特定 意义 的 一 些 单词 ， 关 键 字 不 外 














JavaScript 中 主要 的 关键 字 如 表 14-1 所 示 。 


表 14-1 JavaScript 


Dogl119、 $dcv 
break、 class 


中 主要 的 关键 字 


E 作 为 标识 符 来 使 











break continue default 
delete finally for 
function instanceof new 
return throw try 
typeof while with 
3. 保留 字 


JavaScript 中 除了 关键 字 以 外 , 还 有 一 些 用 于 未 来 扩展 时 使 用 的 保留 字 , 保留 字 同 样 不 
能 用 于 标识 符 的 定义 ，JavaScript 中 主要 的 保留 字 如 表 14-2 所 示 。 


表 14-2 JavaScript 


中 主要 的 保留 字 


var debugger 


extends 


import | iim | aedee | mm | 


abstract 


package 
static 
volatile | | 


14.3.2 数据 类 型 





class 
export 
implements 
native 
short 
transient 


数据 类 型 是 每 一 种 计算 机 语言 的 重要 基础 ，JavaScript 中 的 数据 类 型 可 分 为 字符 型 、 数 
值 型 、 布 尔 型 、Null、Undefined 和 对 象 六 种 类 型 。 


1，String 字符 型 


字符 型 数据 又 称 为 字符 串 ， 由 若干 个 字符 组 成 , 并且 需要 用 单 引号 ('') 或 双 引 号 ("") 
封装 起 来 (在 JavaScript 中 ， 使 用 单 引 号 和 双 引 号 的 效果 是 一 样 的 )， 下 面 的 例子 列举 了 正 





确 和 错误 使 用 字符 型 数据 的 两 种 情形 : 


"Tiger"，"UavaScript 字 符 串 " 
"document"，" 你 好 " 


在 使 用 字符 串 的 过 程 中 ， 有 时 会 遇 到 一 种 情况 : 在 一 个 字符 串 中 需要 使 用 单 引 号 或 双 


(正确 ) 
(错误 ， 单 引号 双 引号 不 匹配 ) 
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引号 。 正 确 的 方法 是 在 由 双 引 号 标记 的 字符 串 中 加 入 引用 字符 时 使 用 单 引号 ， 在 由 单 引号 
标记 的 字符 串 中 加 入 引用 字符 时 使 用 双 引 号 ， 即 保证 一 个 字符 串 的 开头 和 结尾 使 用 同一 种 
引号 ， 而 字符 串 内 使 用 另 一 种 引号 。 下 面 给 出 了 正确 的 用 法 : 

"热烈 欢迎 参加 ' JavaScript 技 术 ' 研 讨 的 专家 " 








2. Number 数值 型 

与 其 他 编程 语言 类 似 , JavaScript 中 最 基本 的 数据 类 型 之 一 是 数值 型 , 该 类 型 可 分 为 整 
型 、 浮 点 型 、 内 部 常量 以 及 特殊 值 。 

(1) 整 型 : 例如 100、-3500、0 等 都 是 整数 。 整 数 除了 以 十 进 制 表示 外 ， 还 可 以 八 进 
制 和 十 六 进 制 的 方式 表示 。 使 用 0 开头 的 整数 是 八进制 整数 ， 如 017、-035 等 都 是 合法 的 
八进制 整数 。 使 用 0x 或 0X 开头 的 整数 是 十 六 进 制 整数 ， 如 0x16、0X3A89 等 都 是 合法 的 
十 六 进 制 整数 。 

(2) 浮 点 型 : 例如 3.53、-534.87 等 都 是 浮 点 型 数值 。 浮 点 数 还 可 以 采用 科学 计数 法 进 
行 表示 ， 如 3.5E15 表示 3.5x10'。 

(3) 内 部 常量 ;JavaScript 中 常用 的 内 部 常量 及 说 明 如 表 14-3 所 示 。 





表 14-3 JavaScript 中 的 内 部 常量 及 说 明 


常 量 说 了 明 
MathE 2 的 自然 对 数 


Math PI 10 的 自然 对 数 
Math.SQRT2 2 的 平方 根 以 2 为 底 的 e 的 对 数 
Math SQRT1 2 1/2 的 平方 根 以 10 为 底 的 e 的 对 数 


(4) 特殊 值 : JavaScript 中 的 特殊 值 及 说 明 如 表 14-4 所 示 。 
表 14-4 JavaScript 中 的 特殊 值 及 说 明 








特 殊 值 说 明 
Infinity 无 穷 大 
NumberNaN 非 数 字 值 (Not a Number) 
NumberMAX VALUE 可 表示 的 最 大 的 数 
Number. MIN VALUE 可 表示 的 最 小 的 数 


负 无 穷 大 ， 溢 出 时 返回 该 值 
正光 穷 大 ， 溢 出 时 返回 该 值 


Number.NEGITIVE_INFINITY 
Number.POSITIVE _INFINITY 


【 例 14-3-1】 数 值 类 型 数据 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-9 所 示 。 


er Er | 
ey 


0 | 























十 进 制 浮 点 型 数 3.5 的 输出 结 
二 3500 
八进制 整 型 数 012 的 输出 结果 ，10 
十 六 进 制 整 型 数 0x12 的 输出 结果 ，18 


视频 讲解 








图 14-9 数值 类 型 数据 使 用 实例 


1 <!-- edu 14 3 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 数 值 类 型 数据 的 应 用 </title> 

时 </head> 

8 <body> 

9 <script type="text/javascript"> 

10 var i = 3500,f = 3.5,s = 3.5e3; 

LL var oO = 012,h = 0x12; 

12 document .write ("十 进 制 整 型 数 "+i+" 的 输出 结果 : "+i+"<br>") > 
3 document .write ("十 进 制 浮 点 型 数 "+f+" 的 输出 结果 : "+f+"<br>"); 
14 document .write ("十 进 制 数 科 学 计数 法 3.5e3 的 输出 结果 : "+s+"<br>") 7 
15 document .write ("八进制 整 型 数 012 的 输出 结果 : "+o+"<br>") 7 

16 document .write ("十 六 进 制 整 型 数 0x12 的 输出 结果 : "+h+"<br>"); 
2 </script> 

18 </body> 

19 </html> 


上 述 代 码 中 第 10 行 定义 变量 1 是 整数 、 变 量 f 是 浮 点 数 、 变 量 s 是 浮 点 数 ， 并 用 科学 
计数 法 表示 ， 相 当 于 3.5x10;， 即 3500; 第 11 行 定义 变量 o 是 一 个 八进制 数 ， 相 当 于 十 进 
制 的 10; 同时 定义 变量 bh 是 一 个 十 六 进 制 数 ， 相 当 于 十 进 制 数 的 18。 

3. Boolean 布尔 型 

布尔 型 是 一 种 只 含有 true 和 false 这 两 个 值 的 数据 类 型 ,通常 来 说 ,布尔 型 数据 表示 “ 真 ” 
或 “ 假 ”。 在 实际 应 用 中 ， 布 尔 型 数据 常用 在 比较 、 逻 辑 等 运算 中 ， 运 算 的 结果 往往 就 是 
true 或 者 false。 例 如 1<2 的 比较 结果 是 tue， 而 3 二 4 的 比较 结果 是 false。 此 外 ， 布 尔 型 
变量 还 常用 在 控制 结构 的 语句 中 ， 如 过 语句 等 。 

JavaScript 中 ， 通 常 采用 true 和 false 表示 布尔 型 数据 ， 但 也 可 将 他 们 转换 为 其 他 类 型 
的 数据 ， 例 如 可 将 值 为 true 的 布尔 型 数据 转换 为 整数 1， 而 将 值 为 false 的 布尔 型 数据 转换 
为 整数 0。 但 不 能 用 true 表示 1 或 false 表示 0。 

4. Null 

在 JavaScript 中 ，Null 是 一 种 特殊 的 数据 类 型 ， 也 称 为 空 类 型 ， 此 类 型 只 有 一 个 值 为 
null， 表 示 “ 无 值 >， 什 么 也 不 表示 。null 除了 表示 Null 类 型 的 数据 外 ， 也 可 用 在 表示 其 他 
类 型 的 数据 中 ， 例 如 对 象 、 数 组 和 字符 串 等 。 当 变量 不 再 使 用 时 ， 将 它 赋值 为 null， 以 释 
放 存 储 空间 。 

$5. Undefined 

在 JavaScript 中 ，Undefined 也 是 一 类 特殊 的 值 ， 是 指 变量 创建 之 后 还 没有 赋值 之 前 所 
具有 的 值 ， 则 返回 值 就 是 Undefined。 它 与 null 值 的 不 同 之 处 在 于 : null 值 表示 已 经 对 变量 
赋值 ， 只 不 过 赋 的 值 是 “无 值 ” 而 Undefined 表示 变量 不 存在 或 者 没有 赋值 。 如 果 使 用 未 
定义 的 变量 也 会 显示 undefined， 但 通常 使 用 未 定义 的 变量 会 造成 程序 错误 。 

6. Object 对 象 

在 JavaScript 中 除了 数值 型 、 字 符 型 和 布尔 型 等 这 些 基 本 的 数据 类 型 以 外 ， 还 有 一 种 
复合 的 数据 类 型 称 为 对 象 , 对 象 是 属性 和 方法 的 集合 。 对 象 的 属性 可 以 是 任何 类 型 的 数据 ， 
包括 数值 、 字 符 、 布 尔 型 ， 甚 至 是 另 一 种 类 型 的 对 象 ， 而 方法 是 一 个 定义 在 对 象 中 的 函数 ， 
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用 于 实现 特定 的 功能 。 
JavaScript 中 定义 了 多 个 对 象 ， 如 Date、window、document 等 ， 这 部 分 内 容 将 在 第 16 
章 详 细 介绍 。 


14.3.3 变量 


JavaScript 变量 是 一 个 存储 或 者 表示 数据 的 名 称 , 可 用 来 存储 和 表示 各 种 数据 类 型 的 数 
据 , 并且 这 些 值 在 程序 运行 期 间 是 可 以 改变 的 ,JavaScript 是 一 种 无 数据 类 型 的 计算 机 语言 ， 
在 定义 变量 时 不 需要 指定 变量 的 数据 类 型 ， 统 一 使 用 关键 字 var 声明 ，JavaScript 会 在 需要 
的 时 候 自动 对 不 同 的 数据 类 型 进行 转型 。 

1. 基本 语法 

var 变量 名 [= 初 值 ] [, 变量 名 [= 初 值 ]…] ; 


2. 语法 说 明 

var (variant) 是 关键 字 ， 声 明 时 至 少 要 有 一 个 变量 ， 并 给 每 个 变量 命名 。 
变量 命名 应 该 符合 标识 符 命名 规范 。 

可 以 同时 声明 多 个 变量 ， 多 个 变量 之 间 用 逗号 “,” 分 隔 。 

可 以 边 声明 边 赋值 。 

每 条 声明 语句 均 需 要 以 “;” 结 束 ， 这 是 一 个 好 习惯 。 

以 下 是 声明 变量 的 示例 。 


Var userName, userAge; 





Var str; 

上 面 例子 中 第 1 行 代码 声明 了 两 个 变量 ， 第 2 行 声明 了 一 个 变量 str。 
var xl= 0, yl= 2.5; // 声 明 时 同时 赋值 

var str = "欢迎 学 习 JS"; // 声 明 时 同时 赋值 


在 JavaScript 中 ， 所 使 用 的 变量 也 可 以 不 声明 直接 使 用 ， 但 这 不 是 一 种 好 的 编程 习惯 ， 
建议 所 有 变量 “ 先 声 明 再 使 用 ”。 

变量 名 = 初 值 ; 

例如 : 

x1 = 0, yl = 2.5; 

str = "欢迎 学 习 JS"; 

userEmail="jlchu@163.com"; // 向 未 声明 的 变量 直接 赋值 

代码 中 第 1 行 给 xl 赋值 为 0，yl 赋值 为 25， 第 2 行 给 str 赋值 为 “欢迎 学 习 JS”。 在 
实际 使 用 中 也 可 将 变量 的 声明 和 赋值 合并 成 一 条 语句 书写 .第 3 行 直接 向 未 声明 变量 赋值 。 
14.3.4 ” 转 义 字符 

如 果 在 字符 串 中 涉及 一 些 特殊 字符 ， 如 “\”“"”“'” 等 ， 这 些 字符 无 法 直接 使 用 ， 
需要 采用 转 义 字符 的 方式 。JavaScript 中 常用 的 转 义 字符 如 表 14-5 所 示 。 





表 14-5 常用 转 义 字符 


代表 含义 
























vb | 退 格 符 水 平 制 表 符 
加 | 换 页 符 单 引号 
un | 行 符 双 引 号 

| 


反 斜 线 





14.4 ”运算 符 和 表达 


JavaScript 运算 符 主要 有 算术 运算 符 、 关 系 运算 符 、 逻 辑 运算 符 、 赋 值 运算 符 、 自 增 、 
自 减 运算 符 、 条 件 运算 符 、 喜 号 运算 符 和 位 运算 符 等 ， 也 可 以 根据 操作 数 的 个 数 ， 将 运算 
符 分 为 一 元 运算 符 、 二 元 运算 符 和 三 元 运算 符 。 

由 操作 数 〈 变 量 、 常 量 、 函 数 等 ) 和 运算 符 结合 在 一 起 构成 的 式 子 称 为 “表达 式 ”， 
最 简单 的 表达 式 可 以 是 常量 名 称 ， 例 如 以 下 都 是 合法 的 表达 式 : 





100 

14.35 

"JavaScript" 

此 外 ， 还 可 以 使 用 操作 数 和 运算 符 建立 复杂 的 表达 式 ， 例 如 “str=" 江 苏 省 ";” 是 一 个 
赋值 表达 式 , 将 字符 串 " 江 苏 省 "赋值 给 变量 str, 还 有 其 他 类 型 的 表达 式 将 在 下 面 详细 介绍 。 


14.4.1 算术 运算 符 和 表达 式 


JavaScript 算术 运算 符 负 责 算 术 运算 ， 用 算术 运算 符 和 运算 对 象 〈 操 作 数 ) 连接 起 来 符 
合 规则 的 式 子 ， 称 为 算术 表达 式 。JavaScript 中 常用 算术 运算 符 如 表 14-6 所 示 。 


表 14-6 算术 运算 符 


运 算 符 操作 说 明 操作 说 明 











十 加 法 运算 符 6 模 〈 取 余 ) 运算 符 
e 减法 运算 符 或 取 反 运算 符 自 增 运算 符 

上 乘法 运算 符 自 减 运算 符 

/ 除法 运算 符 
1. 基本 语法 

二 元 运算 符 : 


opl operator op2 

一 元 运算 符 : 

op operator 或 operator op 

2. 语法 说 明 

算术 运算 符 是 一 类 常见 的 、 较 为 熟悉 的 运算 符 ， 但 作为 一 种 编程 语言 ， 也 有 一 些 需 要 
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特别 注意 的 地 方 。 
1) 加 法 运算 符 (+) 
加 法 运算 符 是 一 个 二 元 运算 符 ， 可 以 对 数值 型 的 操作 数 执行 加 法 操作 。 例 如 : 
304+135; // 对 数字 304 和 135 执 行 加 法 操作 ， 结 果 为 439 
此 外 ， 加 法 运算 符 还 可 以 用 在 其 他 情况 中 。 如 果 两 个 操作 数 都 是 字符 型 ， 或 者 一 个 是 
字符 型 、 另 一 个 是 数值 型 ， 那 么 加 法 运算 将 数值 转换 成 字符 串 ， 然 后 执行 两 个 字符 串 的 连 
接 操 作 。 例 如 : 
"Hello"+"JavaScript"; // 对 两 个 字符 串 执行 连接 操作 ， 结 果 为 "HelloJavaScript" 
"JavaScript"+1.6  // 将 数值 转换 为 字符 ， 再 与 字符 串 连接 操作 ， 结 果 为 "JavaScript1.6" 
2) 减法 运算 符 (-) 
减法 运算 符 是 一 个 二 元 运算 符 ， 对 两 个 数值 型 操作 数 执行 减法 操作 。 例 如 : 
888-303; // 对 数字 888 和 303 执 行 减法 操作 ， 结 果 为 585 


如 果 减 法 运算 符 用 于 取 反 和 运算， 那么 它 就 是 一 个 一 元 运算 符 ， 操 作 数 必须 为 数字 ， 且 
运算 符 位 于 操作 数 前 。 





-108; // 操 作 数 为 108， 取 反 结果 为 -108 
-(-350); // 操 作 数 为 -350， 取 反 结 果 为 350 
减法 运算 符 还 有 一 个 作用 ， 就 是 可 以 将 字符 串 转换 成 数值 型 数据 。 例 如 : 
"690"-0; // 将 字符 串 "690" 转 换 成 数字 690 


3) 乘法 运算 符 (*) 

乘法 运算 符 是 一 个 二 元 运算 符 ， 完 成 两 个 数值 型 操作 数 的 乘法 操作 。 如 果 操 作 数 不 是 
数字 型 ， 但 可 以 转换 为 数值 型 ， 乘 法 运算 符 会 自动 将 其 转换 为 数字 ， 再 进行 乘法 操作 ;如 
果 操 作 数 无 法 转换 成 数值 型 ， 则 运算 结果 为 “NaN”。 


3*5; // 对 数字 3 和 5 执行 乘法 操作 ， 结 果 为 15 
3*"6"; // 将 字符 "6" 转 换 为 数字 6， 再 执行 乘法 操作 ， 结 果 为 18 
3#*"A™ 3; /1"A" 无 法 转换 为 数字 ， 结 果 为 NaN 


4) 除法 运算 符 (/) 

除法 运算 符 是 一 个 二 元 运算 符 ， 完 成 两 个 数值 型 操作 数 的 除法 操作 。 其 运算 规则 与 乘 
法 运算 类 似 ， 如 果 操 作 数 不 是 数字 型 ， 但 可 以 转换 为 数值 型 ， 除 法 运算 符 会 自动 将 其 转换 
为 数字 ， 再 进行 除法 运算 ; 如 果 操 作 数 无 法 转换 成 数值 型 ， 则 运算 结果 为 NaN。 如 果 被 除 
数 为 正 数 ， 除 数 为 0， 则 结果 为 Infinity; 如 果 被 除数 为 负数 ， 除 数 为 0， 则 结果 为 -Infinity。 


得 7 // 对 数字 15 和 5 执行 除法 操作 ， 结 果 为 3 

Ea // 将 字符 "6" 转 换 为 数字 6， 再 执行 除法 操作 ， 结 果 为 3 
EU A i //"A" 无 法 转换 为 数字 ， 结 果 为 NaN 

2070 & // 被 除数 为 20， 除 数 为 0， 结 果 为 Infinity 


-20/0 ; // 被 除数 为 -20， 除 数 为 0， 结 果 为 -Infinity 


5) 模 运 算 符 (%) 
模 运算 符 又 称 取 余 数 运算 符 ， 可 以 计算 第 一 个 操作 数 对 第 二 个 操作 数 的 模 余数)。 


模 运 算 符 同 样 可 以 将 能 够 转换 为 数值 型 的 操作 数 转换 为 数值 型 数据 再 运算 ， 如 果 操作 数 无 
法 转换 为 数值 型 ， 则 取 模 结果 为 NaN。 另 外 ， 任 何 数字 对 0 取 模 结果 都 是 NaN。 


15 % 6; // 对 数字 15 和 6 执行 取 模 操作 ， 结 果 为 3 

16 要 Im // 将 字符 "7" 转 换 为 数字 7， 再 执行 取 模 操作 ， 结 果 为 4 
TN //"A" 无 法 转换 为 数字 ， 结 果 为 NaN 

20 0 // 第 二 个 操作 数 为 0， 结 果 为 NaN 


6) 自 增 运算 符 (++) 

自 增 运算 符 是 一 元 运算 符 ， 可 以 对 操作 数 执行 自 增 运算 ， 增 量 为 1。 要 求 操作 数 必须 
是 变量 ， 不 能 是 常量 。 自 增 运算 有 两 种 形式 : 前 置 和 后 置 。 前 置 是 将 自 增 运算 符 放 在 操作 
数 之 前 ， 表 示 在 使 用 操作 数 之 前 ， 先 将 其 增加 1; 后 置 是 将 自 增 运 算 符 放 在 操作 数 之 后 ， 
表示 在 使 用 完 操 作 数 之 后 ， 再 将 之 增加 1。 例 如 : 


Var x,y,a=3,b=5; 


X=a++7 // 自 增 后 置 , x 的 值 为 3, a 的 值 为 4 
y=++b; // 自 增 前 置 , y 的 值 为 6,b 的 值 为 6 


7) 自 减 运算 符 (一 ) 

自 减 运 算 符 是 一 元 运算 符 ， 可 以 对 操作 数 执行 自 减 运 算 ， 减 量 为 1。 同 样 地 ， 自 减 运 
算 符 也 要 求 操作 数 必须 是 变量 ， 不 能 是 常量 。 自 减 运算 有 两 种 形式 : 前 置 和 后 置 。 前 置 是 
将 自 减 运算 符 放 在 操作 数 之 前 ， 表 示 在 使 用 操作 数 之 前 ， 先 将 其 减少 1， 后 置 是 将 自 减 运 
算 符 放 在 操作 数 之 后 ， 表 示 在 使 用 完 操 作 数 之 后 ， 再 将 之 减少 1。 例 如 

Var x,y,a=8,b=10; 

X=a-——; // 自 减 后 置 ，x 的 值 为 8，a 的 值 为 7 

y=--b; // 自 减 前 置 ，y 的 值 为 9，b 的 值 为 9 


14.4.2 ”关系 运算 符 和 表达 式 


关系 运算 符 用 于 比较 运算 符 两 端的 表达 式 的 值 ， 确 定 二 者 的 关系 ， 根 据 运算 结果 返回 
一 个 布尔 值 。 用 关系 运算 符 和 操作 数 连接 起 来 符合 规则 的 式 子 , 称 为 关系 表达 式 。JavaScript 
中 常用 关系 运算 符 如 表 14-7 所 示 。 


表 14-7 关系 运算 符 








运 算 符 操作 说 明 
= 小 于 等 于 
上 = 大 于 
< 大 于 等 于 
a 非 全 等 于 





1. 基本 语法 

opl operator op2 

2. 语法 说 明 

1) 等 于 运算 符 (一 ) 

等 于 运算 符 是 一 个 二 元 运算 符 ， 用 于 判断 两 个 操作 数 是 否 相等 ， 如 果 相等 返回 true， 


JavaScript 去 矶 
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如 果 不 相等 返回 false。 有 三 点 需要 注意 : 

(1) 操作 数 的 类 型 转型 。 如 果 被 比较 的 操作 数 是 同类 型 的 ， 那 么 等 于 运算 符 将 直接 对 
操作 数 进行 比较 。 如 果 被 比较 的 操作 数 类 型 不 同 ， 那 么 等 于 运算 符 在 比较 两 个 操作 数 之 前 
会 自动 对 其 进行 类 型 转换 。 转 换 规则 为 : 

。 如 果 操 作 数 中 既 有 数字 又 有 字符 串 ， 那 么 JavaScript 将 字符 串 转换 为 数字 ， 然 后 进 





行 比较 。 
。 如 果 操作 数 中 有 布尔 型 值 ， 那 么 JavaScript 将 true 转换 为 1， 将 false 转换 为 0， 然 
后 进行 比较 。 


。 如 果 操 作 数 一 个 是 对 象 ， 一 个 是 字符 串 或 数字 ， 那 么 JavaScript 将 把 对 象 转换 成 与 
另 一 个 操作 数 类 型 相同 的 值 ， 然 后 再 进行 比较 。 

(2) 两 个 对 象 、 数 组 或 者 函数 的 比较 不 同 于 有 字符 串 、 数 字 和 布尔 值 参与 的 比较 。 前 
者 比较 的 是 引用 内 容 ， 换 句 话说， 只 有 两 个 变量 引用 的 是 同一 个 对 象 、 数 组 或 者 函数 的 时 
候 ， 它 们 才 是 相等 的 ， 如果 两 个 变量 引用 的 不 是 同一 个 对 象 、 数 组 和 函数 ， 即 使 它们 的 属 
性 、 元 素 完全 相同 ， 或 者 可 以 转换 成 相等 的 原始 数据 类 型 的 值 ， 它 们 也 是 不 相等 的 。 

(3) 特殊 值 的 比较 。 

。 如 果 一 个 操作 数 是 NaN， 另 一 个 操作 数 是 数字 或 NaN， 那 么 结果 是 不 等 。 

。 如 果 两 个 操作 数 都 是 null， 那 么 结果 相等 。 

。 如 果 两 个 操作 数 都 是 undefined 类 型 ， 那 么 结果 相等 。 

。 如 果 一 个 操作 数 是 null， 一 个 操作 数 是 undefined 类 型 ， 那 么 结果 相等 。 

2) 不 等 于 运算 符 (!=) 

不 等 于 运算 符 和 等 于 运算 符 的 比较 规则 正好 相反 : 如 果 两 个 操作 数 相 等 , 则 返回 false; 
如 果 两 个 操作 数 不 等 ， 则 返回 tue。 除 此 之 外 ， 不 等 于 运算 符 的 数据 类 型 转换 规则 ， 对 象 、 
数组 和 函数 的 比较 方法 ， 以 及 特殊 值 的 处 理 情 况 都 可 以 参考 等 于 运算 符 的 情况 ， 等 于 运 
算 符 返回 tue 时 ， 不 等 于 运算 符 返回 false; 等 于 运算 符 返回 false 时 ， 不 等 于 运算 符 返 
回 true。 

3) 小 于 运算 符 (<) 

小 于 运算 符 用 于 比较 两 个 操作 数 ， 如 果 第 一 个 操作 数 小 于 第 二 个 操作 数 ， 那 么 计算 结 
果 返 回 tue， 和 否则 返回 false。 

小 于 运算 符 存 在 数据 类 型 转换 问题 ， 其 规则 是 : 

。 运算 符 可 以 是 任何 类 型 的 ， 但 是 比较 运算 只 能 在 数字 和 字符 上 执行 ， 所 以 不 是 数字 

和 字符 类 型 的 数据 都 会 被 转换 成 这 两 种 类 型 。 

。 如 果 两 个 操作 数 都 是 数字 ， 或 者 都 能 被 转换 为 数字 ， 则 按照 数字 大 小 规则 比较 。 

。 如 果 两 个 操作 数 都 是 字符 串 , 或 者 都 能 被 转换 为 字符 串 , 则 按照 字母 顺序 规则 比较 。 

。 如 果 一 个 是 字符 串 或 者 能 被 转换 为 字符 串 ， 一 个 是 数字 或 者 能 被 转换 为 数字 ， 则 首 

先 将 字符 串 转 换 成 数字 ， 然 后 按 数字 大 小 规则 比较 。 

。 如 果 操 作 数 中 包含 无 法 转换 成 数字 也 无 法 转换 成 字符 串 的 内 容 ， 比 较 结果 是 false。 

4) 小 于 等 于 运算 符 (<=) 

小 于 等 于 运算 符 用 于 比较 两 个 操作 数 ， 如 果 第 一 个 操作 数 小 于 或 等 于 第 二 个 操作 数 ， 














那么 计算 结果 返回 true， 否则 返回 false。 数 据 类 型 转换 规则 参考 小 于 运算 符 。 

5) 大 于 运算 符 (>) 

大 于 运算 符 用 于 比较 两 个 操作 数 ， 如 果 第 一 个 操作 数 大 于 第 二 个 操作 数 ， 那 么 计算 结 
果 返 回 te， 否则 返回 false。 数 据 类 型 转换 规则 参考 小 于 运算 符 。 

6) 大 于 等 于 运算 符 (>=) 

大 于 等 于 运算 符 用 于 比较 两 个 操作 数 ， 如 果 第 一 个 操作 数 大 于 或 等 于 第 二 个 操作 数 ， 
那么 计算 结果 返回 true， 否则 返回 false。 数 据 类 型 转换 规则 参考 小 于 运算 符 。 

7) 全 等 于 号 全 一) 与 非 全 等 于 号 (! 一 ) 

全 等 于 号 “===” 表 示 比 较 的 两 个 数据 的 值 和 类 型 均 相 等 ， 结 果 为 tue， 若 只 是 值 相 
同 ， 但 类 型 不 同 ， 则 结果 为 false。 例 “9999”===9999， 值 相同 类 型 不 同 ， 结 果 为 false。 
非 全 等 于 号 “!==” 表 示 比 较 的 两 个 数值 的 值 和 类 型 有 一 个 不 相等 ,或 两 个 都 不 相等 “9999”! 
==9999， 值 相同 类 型 不 同 ， 结 果 为 true。 


14.4.3 水 辑 运算 人 符 和 表达 式 


逻辑 运算 符 用 来 执行 逻辑 运算 ， 其 操作 数 都 应 该 是 布尔 型 数值 和 表达 式 或 者 是 可 以 转 
换 为 布尔 型 的 数值 和 表达 式 ， 其 运算 结果 返回 true 或 false。 用 逻辑 运算 符 和 操作 数 连接 起 














来 符合 规则 的 式 子 ， 称 为 逻辑 表达 式 。JavaScript 中 常用 逻辑 运算 符 如 表 14-8 所 示 。 
1. 基本 语法 
二 元 运算 符 : 


boolean expressionl operator boolean expression2 
-元 运算 符 : 
!boolean expression 
2. 语法 说 阴 
1) 逻辑 与 运算 符 (&&) 
逻辑 与 运算 符 是 一 个 二 元 运算 符 , 如 果 两 个 布尔 型 操作 数 都 是 true, 则 运算 结果 为 true; 
如 果 两 个 操作 数 中 有 一 个 或 两 个 为 false， 则 运算 结果 返回 false。 


true && false // 逻 辑 与 运算 结果 为 false 
(8<10) && (3>-1) // (8<10) 为 true，(3>-1) 为 true， 逻 辑 与 运算 结果 为 true 


表 14-8 ”逻辑 运算 符 
!a( 逻 辑 非 ) a&&b( 逻 辑 与 ) allb( 逻 辑 或 ) 











2) 逻辑 或 运算 符 (||) 
逻辑 或 运算 符 是 一 个 二 元 运算 符 ， 如 果 两 个 布尔 型 操作 数 中 有 一 个 或 两 个 为 tue， 则 
运算 结果 返回 tue; 如 果 两 个 布尔 型 操作 数 全 部 为 false， 则 运算 结果 返回 false。 
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true || false ; // 逻 辑 或 运算 结果 为 true 
(3>=5) lll (2>0) 5 // (3>=5) 为 false，(2>0) 为 true， 逻 辑 或 运算 结果 为 true 


3) 逻辑 非 运 算 符 (!) 

逻辑 非 运算 符 是 一 个 一 元 运算 符 ， 其 作用 是 先 计算 操作 数 的 布尔 值 ， 然 后 对 运算 结果 
的 布尔 值 取 反 ， 并 作为 结果 返回 ， 即 如 果 操 作 数 的 布尔 值 为 tue， 则 逻辑 非 的 运算 结果 返 
回 false; 反之 运算 结果 返回 true。 





110 > //10 先 转换 为 布尔 型 变量 true， 逻 辑 非 运算 结果 为 false 
1((4<10)&& (5>6)) ;// (4<10) 为 true，5>6 为 false， 逻 辑 与 运算 结果 为 false， 再 进行 逻 
辑 非 运 算 结 果 为 true 


14.4.4 赋值 运算 符 和 表达 式 


赋值 运算 符 是 JavaScript 中 使 用 频率 最 高 的 运算 符 之 一 。 赋 值 运 算 符 要 求 其 左 操作 数 
是 一 个 变量 、 数 组 元 素 或 对 象 属 性 ， 右 操作 数 是 一 个 任意 类 型 的 值 ， 可 以 为 常量 、 变 量 、 
数组 元 素 或 对 象 属性 。 赋 值 运算 符 的 作用 就 是 将 右 操 作 数 的 值 赋 给 左 操作 数 。 用 赋值 运算 
符 和 操作 数 连接 起 来 符合 规则 的 式 子 , 称 为 赋值 表达 式 。JavaScript 中 常用 赋值 运算 符 列 在 
表 14-9 中。 

表 14-9 赋值 运算 符 
| 操作 说 明 《| 运算 符 | 操作 说 明 
EEC 
医 


复合 赋值 运算 符 ，a/=b 同 于 a=a/b 


复合 赋值 运算 符 ，a+=b 同 于 a=atb 
复合 赋值 运算 符 ，a-=b 同 于 a=a-b 复合 赋值 运算 符 ，a%=b 同 于 a=a%b 





1. 基本 语法 

简单 赋值 运算 : 

< 变量 >=< 变 量 > operator < 表达 式 > 
复合 赋值 运算 : 

< 变量 > operator =< 表 达 式 > 


2. 语法 说 明 

赋值 运算 符 可 以 将 一 个 什 赋 给 一 个 变量 名 。 

Var a=10, b=20, c; 

c= ar //c 的 值 为 10 

// 相 当 于 c=c+b，c 的 值 为 30 
// 相 当 于 c=c/a，c 的 值 为 3 
// 相 当 于 b=b%c，b 的 值 为 2 


-| 
Ap ~ 十 
Ll 
人 


14.4.5 位 运算 人 符 和 表达 式 

位 运算 符 是 对 二 进 制 表示 的 整数 进行 按 位 操作 的 运算 符 。 如 果 操作 数 是 十 进 制 或 者 其 
他 进 制 表示 的 整数 , 运算 前 先 将 这 些 整数 转换 成 32 位 的 二 进 制 数字 , 如 果 操 作 数 无 法 转换 
成 32 位 的 二 进 制 数 表示 ， 位 运算 的 结果 为 NaN。 














1. 基本 语法 
二 元 运算 符 : 
opl operator op2 
operator op 
2. 语法 说 明 
位 运算 符 是 在 数 的 二 进 制 基础 上 进行 操作 ,JavaScript 中 常用 位 运算 符 如 表 14-10 所 示 。 
表 14-10 位 运算 符 
运 算 符 操作 说 明 运 操作 说 明 
& 
| 





按 位 与 运算 符 按 位 非 运算 符 


按 位 或 运算 符 | 按 位 异 或 运算 符 


1) 按 位 与 运算 符 (&) 

按 位 与 运算 符 是 一 个 二 元 运算 符 ， 它 将 两 个 整数 型 操作 数 转换 为 二 进 制 数 并 逐 位 进行 
逻辑 与 操作 。 如 果 两 个 操作 数 对 应 位 置 上 的 数字 都 是 1, 运算 结果 的 这 一 位 为 1, 否则 为 0。 

10 & 78 // 将 十 进 制 数 10 转 换 为 二 进 制 数 00001010， 将 十 进 制 数 78 转 换 为 二 进 制 数 
01001110， 按 位 与 结果 为 00001010， 转 换 为 十 进 制 数 为 10 


030 & 071 // 将 八进制 数 30 转 换 为 二 进 制 数 00011000， 将 八进制 数 71 转 换 为 二 进 制 数 
00111001， 按 位 与 结果 为 00011000， 转 换 为 十 进 制 数 为 24 


2) 按 位 或 运算 符 (|) 

按 位 或 运算 符 是 一 个 二 元 运算 符 ， 它 将 两 个 整数 型 操作 数 转换 为 二 进 制 数 并 逐 位 进行 
逻辑 或 操作 。 如 果 两 个 操作 数 对 应 位 置 上 的 数字 都 是 0, 运算 结果 的 这 一 位 为 0, 否则 为 1。 

81 1 16 // 将 十 进 制 数 81 转 换 为 二 进 制 数 01010001， 将 十 进 制 数 16 转 换 为 二 进 制 数 00010000， 
按 位 或 结果 为 01010001， 转 换 为 十 进 制 数 为 81 

0xAl | 0x39 // 将 十 六 进 制 数 A1 转 换 为 二 进 制 数 10100001， 将 十 六 进 制 数 39 转 换 为 二 进 制 数 
00111001， 按 位 或 结果 为 10111001， 转 换 为 十 进 制 数 为 185 


3) 按 位 非 运算 符 (~) 
按 位 非 运算 符 是 一 个 一 元 运算 符 ， 其 作用 是 将 整 型 操作 数 转换 为 二 进 制 数 并 逐 位 进行 
逻辑 非 操作 ， 即 将 操作 数 的 每 一 位 取 反 (将 1 变 为 0，0 变 为 1)。 

~100 // 将 十 进 制 数 100 转 换 为 二 进 制 数 00000000 00000000 00000000 01100100， 按 位 
非 的 结果 为 11111111 11111111 11111111 10011011 (这 是 负数 的 补 码 )， 转 换 为 十 
进 制 数 为 -101 

~0xCD // 将 十 六 进 制 数 cD 转换 为 二 进 制 数 00000000 00000000 00000000 11001101， 按 位 
非 的 结果 为 1111111 11111111 11111111 00110010 (这 是 负数 的 补 码 )， 转 换 为 十 
进 制 数 为 -206 


4) 按 位 异 或 运算 符 (^) 

按 位 异 或 运算 符 是 一 个 二 元 运算 符 ， 它 将 两 个 整数 型 操作 数 转换 为 二 进 制 数 并 逐 位 进 
行 逻 辑 异 或 操作 。 如 果 两 个 操作 数 对 应 位 置 上 的 数字 相同 (都 为 0 或 都 为 1)， 运 算 结果 的 
这 一 位 为 0， 否则 为 1。 例 如 : 
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10^30 // 将 十 进 制 数 10 转 换 为 二 进 制 数 00001010， 将 十 进 制 数 30 转 换 为 二 进 制 数 00011110， 
按 位 异 或 的 结果 为 00010100， 转 换 为 十 进 制 为 20 
0xA0 ^ 032// 将 十 六 进 制 数 A0 转 换 为 二 进 制 数 10100000， 将 八进制 数 32 转 换 为 二 进 制 位 00011010， 
按 位 异 或 的 结果 为 10111010， 转 换 为 十 进 制 数 为 186 


14.4.6 条 件 运算 符 和 表达 式 

条 件 运 算 符 是 一 个 三 元 运算 符 ， 条 件 表 达 式 由 ? 、: 运算 符 和 三 个 操作 数 构 成 。 

1. 基本 语法 

< 变量 >=< 条 件 表达 式 > ? < 真 值 表 达 式 > : < 假 值 表 达 式 > 

2. 语法 说 明 

该 条 件 表 达 式 表示 ， 如 果 条 件 表达 式 的 结果 为 真 (tue)， 则 将 真 值 表达 式 的 值 赋 给 变 
量 ， 否 则 将 假 值 表达 式 的 值 赋 给 变量 。 

例如 ， 变 量 numberl 、number2 比较 大 小 ， 将 较 大 的 数 赋值 给 变量 max， 代 码 如 下 : 


Var max= (numberl>number2) ?numberl :number2; 


14.4.7 其 他 运算 丛 和 表达 式 


JavaScript 中 除了 上 述 运 算 符 外 ， 还 有 一 些 其 他 运算 符 ， 如 表 14-11 所 示 。 
表 14-11 其 他 运算 从 


运算 符 加 人 说 拯 作 说 朋 
人 删除 运算 符 
We 类型 运算 符 





1， 去 号 运算 符 〈,) 
去 号 运算 符 是 一 个 二 元 运算 符 ， 其 运算 规则 是 先 计算 第 一 个 表达 式 的 值 ， 再 计算 第 二 
个 表达 式 的 值 ， 运 算 结 果 为 第 二 个 表达 式 的 值 。 


Var rs’; 
rs = (3+5，10*6); // 先 计算 第 一 个 表达 式 3+5 的 值 为 9， 再 计算 第 二 个 表达 式 10 X 6 的 值 为 
60， 最 后 将 第 二 个 表达 式 的 值 60 赋 给 变量 rs 


2. 新 建 对 象 运算 符 (new) 
新 建 对 象 运算 符 是 一 个 一 元 运算 符 ， 用 于 创建 JavaScript 对 象 实例 或 数组 。 


var obj = new Object (); // 创 建 一 个 Object 对 象 ， 对 象 名 为 obj 
var date = new Date(); // 创 建 一 个 Date 对 象 ， 对 象 名 为 date 
var array = new Array(); // 创 建 一 个 数组 对 象 ， 对 象 名 为 array 


3. 删除 运算 符 〈delete) 

删除 运算 符 是 一 个 一 元 运算 符 ， 用 于 删除 一 个 对 象 的 属性 或 某 个 数组 的 元 素 。 

delete array[30]; // 删 除 array 数 组 中 下 标 为 30 元 素 〈 第 31 个 元 素 ) 

delete obj .height; // 删 除 对 象 obj 的 height 属 性 

4. 类 型 运算 符 〈typeof) 

类 型 运算 符 是 一 个 一 元 运算 符 ， 其 操作 数 可 以 是 任意 类 型 ， 运 算 结果 返回 一 个 表示 操 
作 数 类 型 的 字符 串 。 





typeof (300) // 运 算 结果 为 number 
typeof ("Hello"); // 运 算 结果 为 String 


typeof 运算 符 的 具体 规则 如 表 14-12 所 示 。 


表 14-12 类 型 运算 符 运算 规则 
数据 类 型 





疆 





运算 结果 






















数字 型 | Number 数组 Object 
字符 型 函数 Function 
N Object 








undefined 


ull 
14.5 ”JavaScript 程序 控制 结构 





在 HIML 基础 上 , 使 用 JavaScript 可 以 开发 交互 式 Web 页 面 ， 如 可 以 在 线 填 写 各 类 表 
格 、 联 机 编写 文档 并 发 布 等 。JavaScript 的 出 现 使 得 网 页 和 用 户 之 问 实 现 了 一 种 实时 性 的 、 
动态 的 、 交 互 性 的 关系 ， 使 网 页 包含 更 多 活跃 元 素 和 更 加 精彩 的 内 容 。 这 也 是 JavaScript 
与 HTML DOM 共同 构成 Web 网 页 的 行为 。 在 网 页 设计 中 JavaScript 的 主要 作用 是 实现 内 
容 与 行为 的 分 离 ， 而 要 设计 交互 式 的 页 面 必 须 编写 相应 的 脚本 程序 。 程 序 是 专门 用 来 解决 
某 一 问题 的 特定 代码 。 

JavaScript 程序 设计 分 为 面向 过 程 和 面向 对 象 的 程序 设计 。 在 所 有 的 编程 语言 中 , 程序 
的 结构 都 有 三 种 ， 分 别 为 顺序 结构 、 分 支 结 构 和 循环 结构 ， 任 何 复杂 的 算法 均 可 以 使 用 这 
三 种 结构 来 表达 。 


14.5.1 顺序 结构 


顺序 结构 是 程序 设计 中 最 常用 、 最 基本 的 一 种 程序 结构 ， 是 按照 语句 出 现 的 顺序 ， 从 
第 一 条 语句 开始 一 步 一 步 逐 条 执行 ， 直 至 最 后 一 条 语句 。 

【 例 14-S-1】 使 用 顺序 结构 程序 计算 圆 的 周 长 和 面积 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 
14-10 所 示 。 

1 < 和 == edu 14 5 1.html ==> 


2 <!doctype html> 
3 <html lang="en"> 




















4 <head> 视频 讲 
5 <meta charset="UTF-8"> 

6 <title> 顺 序 结构 的 应 用 </title> 

7 </head> 

8 <body> 

9 <script type="text/javascript"> 

10 var radius = 6; 

1 Var circumference = 2 * Math.PIl * radius; 

2 Var area = Math-PI * radius * radius; 

13 alert (" 圆 的 周 长 为 "” + circumferencet"\n"+" 圆 的 面积 为 " + area); 
14 </acript> 

15 </body> 

16 </html> 

代码 解释 








代码 中 使 用 了 顺序 结构 计算 圆 的 周 长 和 面积 。 第 10 行 定义 圆 的 半径 变量 并 赋值 为 6; 
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第 11 行 定义 圆 的 周 长 变 量 并 赋值 ; 第 12 行 定义 圆 的 面积 并 赋值 ; 第 13 行 输出 圆 的 周 长 和 
面积 信息 。 整 个 代码 从 始 至 终 都 是 按照 代码 书写 的 顺序 一 行 一 行 执行 , 直到 最 后 一 条 语句 。 











国 的 周 长 为 37.69911184307752 
国 的 面积 为 113.09733552923255 


Dl 











图 14-10 计算 圆 的 周 长 和 面积 
14.5.2 分 支 结 构 


在 JavaScript 中 可 以 使 用 四 种 形式 分 支 结构 语句 : 
。 单 if0{ 语 句 块 } 语 句 ， 在 条 件 成 立时 执行 语句 块 。 
。 双 if(){ 语 句 块 1}else{ 语 句 块 2} 语句, 在 指定 条 件 成 立时 执行 语句 块 1, 不 成 立时 执 
行 语句 块 2。 
多 if0) {语句 块 1}else if 0{ 语 句 块 2}…else{ 语 句 块 n} 语 句 ， 在 指定 条 件 成 立时 执行 
语句 块 1， 否 则 再 判断 第 2 个 条 件 ， 如 果 成 立 执 行 语句 块 2， 以 此 类 推 ， 直 到 所 有 
条 件 均 不 成 功 时 执行 语句 块 n。 
。 多 分 支 switch0 人 ff 语句， 根据 变量 或 表达 式 的 值 与 case 常量 匹配 情况 ， 选 择 其 中 一 
个 分 支 执 行 。 
1. 这 语句 
让 语句 是 单 分 支 条 件 语句 ， 即 根据 一 个 条 件 来 控制 程序 执行 的 流程 。 
1) 基本 语法 
if (表达 式 ) { 
条 件 为 真 时 执行 代码 ; 


} 

2) 语法 说 明 

让 语句 的 小 插 号 中 表达 式 的 结果 类 型 必须 是 布尔 型 ， 即 true 或 false， 当 值 为 tue 时 ， 
则 执行 大 括号 中 的 代码 ， 否 则 跳 过 大 括号 中 的 代码 继续 执行 大 括号 后 面 的 代码 。if 语句 的 
流程 图 如 图 14-11 所 示 。 

【 例 14-$-2】 判 断 学 生成 绩 是 否 及 格 。 代 码 如 下 所 示 ， 页 面 效果 如 图 14-12 所 示 。 











全 考试 成 结 为 87 分 ,及格 ! 





图 14-11 让 条 件 语句 流程 图 图 14-12 单 寺 语句 应 用 实例 

















1 <!-- edu 14 5 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 单 if 语 句 的 应 用 </title> 

时 </head> 

8 <body> 

9 <script type="text/javascript"> 
10 Var Score = 87; 

E if (score >= 60) 

3 { 

13 alert ("考试 成 绩 为 "+score+" 分 ， 及 格 ! ") > 
14 人 

35 </script> 

16 </body> 

17 </html> 

3) 代码 解释 


代码 中 第 10 行 定义 变量 score 并 赋值 为 87; 第 11 行 判断 关系 表达 式 score>=60， 结果 
为 tue， 因 此 执行 大 括号 中 的 代码 ， 通 过 告警 消息 框 输出 “考试 成 绩 为 87 分 ， 及 格 1”。 

2. if…else 语句 

If…else 语句 是 双 分 支 条 件 语句 ， 即 根据 一 个 条 件 来 控制 程序 执行 的 流程 。 

1) 基本 语法 


if (表达 式 ) { 
条 件 成 立时 执行 代码 1 
}elsel{ 


条 件 不 成 立时 执行 代码 2 
} 


2) 语法 说 明 
代码 中 这"…else 语句 的 小 括号 中 表达 式 的 结果 类 型 必须 是 布尔 型 ， 即 true 或 false， 当 
值 为 tue 时 ， 则 执行 代码 1;， 和 否则 执行 代码 2。If…else 语句 的 流程 图 如 图 14-13 所 示 。 
开始 


| true > false | 


代码 1 代码 2 


图 14-13 ”下 …else 条 件 语 句 流程 图 














【 例 14-5-3】 判 断 学 生成 绩 是 否 及 格 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-14 所 起 


1 <t== edu 14 .5 3.html =—> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 视频 讲解 
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<meta charset="UTF-8"> 
6 <title>if...else 语 句 的 应 用 </title> 
汪 </head> 
8 <body> 
9 <script type="text/javascript"> 
10 var score = parseFloat (prompt ("请 输入 课程 成 绩 "，, 50) ) ; // 解 析 为 实数 
贡 于 if (score >= 60) 
12 { 
13 alert ("考试 成 绩 为 "+score+" 分 ， 及 格 ! ") 7 
14 } 
15 else 
16 证 
3 alert (" 考 试 成 绩 为 "+score+" 分 ， 不 及 格 ! ") 
18 } 
19 </script> 
20 </body> 
21 </html> 

















图 14-14 ”让 …else 语句 应 用 的 界面 图 


代码 中 第 10 行 定义 变量 score 并 通过 提示 信息 框 进行 赋值 ， 在 输入 50 后 ， 单 击 “ 确 
定 ” 按 钮 , 然后 将 字符 型 数据 转换 浮 点 数 ; 第 11 行 判断 关系 表达 式 score>=60, 结果 为 false， 
因此 执行 第 17 行 的 代码 ， 通 过 告警 消息 框 输出 “考试 成 绩 为 50 分 ， 不 及 格 !”。 如 果 再 次 
运行 程序 时 ， 输 入 65 后 ， 再 单 击 “ 确 定 ”按钮 ， 会 执行 第 13 行 语句 ， 通 过 告警 消息 框 输 
出 “考试 成 绩 为 65 分 ， 及 格 !”。 


3. 多 


重 站 …else 语句 


Jf…else if…else 语句 是 多 条 件 多 分 支 语句 , 可 根据 两 个 以 上 条 件 来 控制 程序 执行 的 流程 。 


1) 基 


} 


Doo、wanwm 心 wn 


卢 


2) 语 
在 多 本 


本 语法 


if (表达 式 1) { 


代码 1 


} 
else if (表达 式 2) { 


代码 2 


else { 


代码 n 


法 说 明 
外 f…else if…else 语句 中 ， 计 以 及 多 个 else 让 后面 的 小 括号 内 的 表达 式 的 值 为 





boolean 类 型 。 
程序 执行 时 ， 按 照 该 语句 中 表达 式 的 顺序 ， 首 先 计算 表达 式 1 的 值 ， 如 果 计 算 结果 为 
true， 则 执行 代码 1， 执 行 完 后 结束 If…else if…else 语句 ; 如 果 计 算 结果 为 false， 则 继续 


计算 表达 式 2 的 值 ， 以 此 类 推 ， 假 设 第 n 个 表达 式 值 为 tue， 则 执行 紧 跟 的 代码 n， 并 结 
束 还 …else if…else 语句 执行 ， 否则 继续 计算 第 n+l 个 表达 式 的 值 。 如 果 所 有 表达 式 的 值 都 
为 false， 则 执行 关键 字 else 后 面 的 代码 n， 结 束 f…else if…else 语句 的 执行 。 其 语句 的 执 
行 流程 如 图 14-15 所 示 。 












图 14-15 多 重 直 …else if…else 条 件 语 句 流程 图 
例如 ， 学 生成 绩 五 级 制 表 示 法 中 部 分 js 代码 如 下 所 示 : 


1 <script type="text/javascript"> 

2 // 五 级 制 成 绩 表示 法 

// 采 用 分 支 嵌 套 结构 

document .write ("<b> 判 断 课 程 成 绩 等 级 </b><br>") ; 
document .write (" 课 程 成 绩 为 85 分 ") 

//var x=85; // 直 接 给 定 某 课程 成 绩 

// 利 用 函数 输入 一 个 成 绩 

var x=prompt ("请 输入 你 的 成 绩 : "，, 85) ; 

9 if (x!=null){ 


10 if (x>=90) { 

EE alert ("1-- 成 绩 为 \" 优 秀 \"! "); 
12 }else if (x>=80){ 

13 alert ("2-- 成 绩 为 \" 良 好 \"! "); 
14 }else if (x>=70){ 

15 alert ("3-- 成 绩 为 \" 中 等 \ "! "); 
16 }else if (x>=60){ 

17 alert ("4-- 成 绩 为 \" 合 格 \"! "); 
18 }elsel{ 

19 alert ("5-- 成 绩 为 \" 不 及 格 \ "! "); 
20 } 

21 }elsef{ 

22 alert ("请 重新 输入 成 绩 ! ") ; 

23 和 


24 alert ("6-- 程 序 结束 ! "); 

25 </acript> 

4. switch 语句 

switch 语句 是 单条 件 多 分 支 语 句 , 它 可 以 通过 判断 一 个 条 件 完成 程序 多 个 分 支 的 控制 ， 
比 下 …else 使 用 更 为 方便 ， 结 构 更 清晰 。 


1) 基本 语法 第 
1 switch (表达 式 ) { 
章 
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2 case 常量 1: 

3 { 代码 1 
4 }break; 
每 case 常量 2: 

6 { “代码 2 
汪 }break; 
8 PI 

9 case 常量 n: 
10 { 代码 n 
11 } break; 
1 default: 

13 {代码 n+1} 


2) 语法 说 明 

执行 switch 语句 时 , 首先 计算 变量 或 表达 式 的 值 , 然后 查找 和 这 个 值 匹 配 的 case 常量 ， 
如 果 找 到 了 匹配 的 常量 ， 则 执行 后 面 的 语句 块 ; 否则 执行 default 后 的 语句 块 。 

在 上 面 的 语法 格式 中 , 每 个 case 语 句 块 的 后 面 都 有 一 个 break 语 句 ,其 作用 是 终止 switch 
语句 的 执行 ， 继 续 执行 switch 下 面 的 语句 。 如 果 没 有 这 个 break 语句 ， 那 么 switch 语句 会 
从 和 表达 式 的 值 匹配 的 case 常量 开始 ， 依 次 执行 后 面 所 有 的 代码 ， 直 到 switch 语句 的 结 
尾 处 。 

【 例 14-5-4】 采 用 switch 结构 实现 成 绩 等 级 制 转 百分制 。 代 码 如 下 所 示 ， 页 面 效 果 如 
图 14-16 所 示 。 5 回 

1 <!-- edu 14 5 4.html --> 


2 <!doctype html> 
3 <html lang="en"> 





2 


4 <head> 视频 讲 
Ss <meta charset="UTF-8"> 
6 <title>switch 结 构 的 应 用 </title> 
7 <script type="text/javascript"> 
8 function showScore (type) 1{ 
9 Var msg=""; 
10 Switch (type) 
11 { 
12 case 'A': 
33 {msg=" 成 绩 为 900 一 100";break;} 
14 case 'B': 
15 {msg=" 成 绩 为 80 一 89";break;} 
16 Gase "C": 
Ey { msg=" 成 绩 为 10 一 79";break;} 
18 case 'D': 
19 {msg=" 成 绩 为 60 一 69";break;} 
20 case 'E': 
2 {msg=" 成 绩 低 于 60";break;} 
p24 default: 
23 {msg=" 成 绩 类 型 错误 !";} 
24 } 
25 alert (msg); 
26 } 
27 </script> 
28 </head> 


29 <body> 


30 <form> 


3 请 输入 学 生成 绩 等 级 : 


32 <input type="text" name="score"/><br/> 

33 <input type=" button"value=" 显示 学 生 分 数 "onclick="showScore (score.value) "/> 
34 </form> 

35 </body> 

36 </html> 
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请 输入 学 生成 绩 等 级 。 5 











图 14-16 switch 语句 的 应 用 


代码 中 第 7 一 27 行 在 script 标记 内 定义 了 showScore0 函 数 ，showScore() 函 数 中 使 用 
switch 结构 判断 学 生成 绩 等 级 ， 并 根据 type 的 值 和 case 后 面 的 常量 进行 匹配 ; 第 33 行为 
普通 按钮 的 onclick 事件 属性 指定 事件 处 理 程序 ， 调 用 showScore0 函 数 ， 并 将 单行 文本 输 
入 框 score 中 的 内 容 作为 函数 showScore0 的 实际 参数 。 输 入 等 级 B 后 ， 单 击 “ 显 示 学 生 分 
数 ” 按 钮 ， 弹 出 告警 消息 框 显示 信息 “成 绩 为 80 一 89”， 如 图 14-16 所 示 。 


14.5.3 ”循环 结构 


如 果 遇 到 要 求 将 一 个 班级 中 所 有 同学 的 名 字 按 每 行 10 个 的 方式 输出 到 网 页 上 时 ， 在 
页 面 中 重复 写 n 行 相同 的 代码 去 输出 所 有 同学 的 名 字 , 很 显然 是 不 科学 的 , 也 是 不 可 取 的 。 
这 种 情况 使 用 循环 结构 可 以 解决 实际 问题 。JavaScript 提供 了 for、while、do…while、for… 
in 等 多 种 循环 。 

1.for 循环 

for 循环 是 一 种 结构 简单 、 使 用 频率 高 的 循环 控制 语句 ,作用 是 有 条 件 地 重复 执行 一 段 
代码 。for 语句 的 执行 流程 如 图 14-17 所 示 。 









图 14-17 for 循环 流程 
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1) 基本 语法 
for (表达 式 1 ;表达 式 2; 表达 式 3) 


{ 

需要 循环 执行 的 代码 ; 

: 

2) 语法 说 明 

。 for 是 for 语句 的 关键 字 , for 关键 字 后 面 的 一 对 小 括号 0 不 可 缺 省 , 括号 中 用 分 号 “;” 
分 隔 的 三 个 表达 式 。 


。 表达 式 1 是 初始 表达 式 ， 在 循环 开始 前 执行 ， 一 般 用 来 定义 循环 变量 。 
表达 式 2 是 判断 表达 式 ， 就 是 循环 条 件 ， 必 须 为 boolean 型 数据 的 表达 式 ， 当 表达 
式 的 结果 为 tue 时 循环 继续 执行 ， 否 则 循环 结束 。 

。 表达 式 3 是 循环 表达 式 ， 在 每 次 循环 执行 后 都 被 执行 ， 作 用 是 修改 循环 变量 ， 然 后 

再 进行 判断 表达 式 的 计算 ， 决 定 是 否 继续 下 一 次 循环 。 

。 大 括号 生 内 的 代码 为 循环 体 ， 循 环 体 只 有 一 条 语句 时 ， 大 括号 冉 可 以 省 略 。 

for 语句 的 执行 规则 是 : 

(1) 计算 初始 表达 式 的 值 ， 完 成 循环 的 初始 化 工作 ; 

(2) 计算 判断 表达 式 的 值 ， 若 判断 表达 式 为 tue， 则 转 到 (3)， 否 则 跳 转 到 (4); 

(3) 执行 循环 体 代码 ， 然 后 计算 循环 表达 式 的 值 ， 以 改变 循环 变量 ， 跳 转 到 (2); 

(4) 结束 for 语句 的 执行 。 

【 例 14-S-S】 使 用 for 语句 计算 1 一 100 之 间 所 有 数字 之 和 。 代 码 如 下 所 示 ， 
如 图 14-18 所 示 。 


<= oda 14 5 Shtml ==> 
2 <!doctype html> 
3 <html lang="en"> 

4 <head> 视频 讲解 
号 <meta charset="UTF-8"> 

6 <title>for 循 环 的 应 用 </title> 

7 </head> 

8 <body> 

9 <script type="text/javascript"> 

10 for (var 1i=1, sum=0; i<=100;i++) 
11 { 
12 

13 

14 

15 





sum = sum + i; 

} 

document .write (" 用 for 循 环 求 1 一 100 之 间 所 有 数字 之 和 为 "” + sum); 
</script> 

16 </body> 

17 </html> 


3) 代码 解释 

代码 中 第 10 行 设置 for 循环 的 三 个 表达 式 ， 分 别 是 初始 化 表达 式 、 判 断 表达 式 和 循环 

表达 式 ; 第 12 行 完成 累加 功能 ; 第 14 行 用 document write() 方 法 在 页 面 上 输出 计算 结果 。 
ES 

(TOD ep cls > 上 CE 


用 for 特 环 求 1 一 100 之 间 所 有 数字 之 和 为 5050 加 


图 14-18 for 循环 使 用 实例 




















2. while 循环 

while 循环 是 JavaScript 中 最 基本 的 循环 控制 语句 之 一 ， 其 作用 是 有 条 件 地 重复 执行 某 
一 段 代码 。 

1) 基本 语法 


1 while (表达 式 ) 
24 
3 
4 





| 需要 循环 执行 的 代码 ; 

2) 语法 说 明 

while 语句 由 关键 字 while、 一 对 括号 0 中 的 表达 式 和 一 个 大 括号 全 中 的 代码 组 成 ， 代 
人 码 称 为 循环 体 ， 表 达 式 称 为 循环 条 件 。 由 于 while 循环 中 只 有 一 个 判断 表达 式 ， 不 像 for 
循环 有 三 个 表达 式 ， 所 以 初始 化 表达 式 必须 挪 到 while 循环 结构 前 面 ， 循 环 表达 式 必须 挪 
到 while 循环 体 中 。 此 时 while 循环 与 for 循环 才能 执行 同样 的 功能 。 

while 语句 的 执行 流程 是 : 

(1) 先 计算 表达 式 的 值 ， 如 果 值 为 tue， 跳 转 到 (2)， 和 否则 跳 转 到 〈3 ); 

(2) 执行 循环 体 代 码 ， 跳 转 到 (1); 

(3) 终止 while 语句 的 执行 。 

使 用 while 循环 时 需要 注意 的 几 个 问题 是 : 

。 在 while 循环 之 前 必须 完成 循环 变量 初始 化 工作 。 

。 不 管 有 没有 语句 ， 循 环 体 语句 必须 使 用 人 峡 括 起 来 。 

。 循环 体 语句 中 必须 含有 循环 控制 语句 ， 避 免 发 生死 循环 。 

while 语句 的 执行 流程 如 图 14-19 所 示 。 





图 14-19 while 循环 流程 


【 例 14-$-6】 使 用 while 语句 计算 1 一 100 之 间 所 有 数字 之 和 。 代 码 如 下 所 示 ， 页 面 效 
果 如 图 14-20 所 示 。 Pe 
1 <!-- edu 14 5 6.html --> ' 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
5 <meta charset="UTF-8"> 
6 <title>while 循 环 的 应 用 </title> 
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于 </head> 
8 <body> 
9 <script type="text/javascript"> 
10 var i=1,sum=0; // 定 义 循环 初始 化 表达 式 
11 while (i<=100) // 定 义 判断 表达 式 
12 
3 sum=sum+i; // 计 算 累 加 和 
14 i=i+tl; // 定 义 循环 表达 式 
15 } 
16 document .write ("用 while 循 环 计算 1~~100 之 间 所 有 数字 之 和 =" + sum) ; 
FE </script> 
18 </body> 
19 </html> 














| 月 whle 插 环 计算 1~ 100 之 间 所 有 数字 之 和 =5050 


























图 14-20 ”while 循环 使 用 实例 


3) 代码 解释 

代码 中 第 10 行 定义 了 初始 化 表达 式 〈 相 当 于 for 循环 的 第 1 个 表达 式 ); 第 11 行 设置 
while 循环 条 件 为 i<=100〈 相 当 于 for 循环 的 判断 表达 式 )， 如 果 条 件 成 立 ， 则 将 i 值 累加 
到 和 sum 中 , 第 14 行将 i 的 值 加 1 (相当 于 for 循环 的 循环 表达 式 )， 直 至 i 的 值 大 于 100， 
跳出 循环 ， 并 输出 1 一 100 之 间 所 有 数 之 和 。 

3.do…while 循环 

do…while 循环 和 while 循环 非常 类 似 ， 也 用 于 重复 执行 某 一 段 代码 。 它 们 的 不 同 点 在 
于 : while 循环 的 条 件 表达 式 位 于 while 循环 的 头 部 ， 而 do…while 循环 的 条 件 表达 式 位 于 
do…while 循环 的 尾部 。 因 此 while 循环 总 是 先 检测 条 件 表达 式 是 否 成 立 ， 如 果 成 立 才 执行 
循环 体 代 码 ， 而 do…while 循环 则 先 执行 一 次 循环 体内 的 代码 ， 再 判断 条 件 表达 式 是 否 成 
立 , 如 果 成 立 则 继续 执行 循环 体 语句 , 否则 结束 循环 。 do…while 语句 的 执行 流程 如 图 14-21 








所 示 。 
下 始 
图 14-21 do…while 语句 流程 
1) 基本 语法 
do { 


需要 循环 执行 的 代码 ; 


} while (表达 式 ) 

2) 语法 说 明 

与 while 循环 一 样 ， 使 用 do…while 循环 时 需要 注意 的 几 个 问题 是 : 

。 在 do…while 循环 之 前 必须 完成 循环 变量 初始 化 工作 。 

。 不 管 有 没有 语句 ， 循 环 体 语句 必须 使 用 癸 括 起 来 。 

。 循环 体 语句 中 必须 含有 循环 控制 语句 ， 避 免 发 生死 循环 。 

do…while 循环 的 执行 流程 是 : 

(1) 执行 循环 体 代 码 ; 

(2) 计算 表达 式 的 值 ， 如 果 值 为 rue， 跳 转 到 (1)， 否 则 跳 转 到 (3); 

(3) 终止 while 语句 的 执行 。 

do…while 循环 和 while 循环 的 执行 过 程 基本 相同 ， 所 不 同 的 是 : while 循环 先 判 断 给 
定 条 件 是 否 成 立 ， 后 执行 循环 体 ， 而 do…while 循环 则 是 先 执行 一 次 循环 体 ， 后 判断 条 件 。 
因此 ， 在 一 定 条 件 下 ，while 循环 可 能 一 次 都 不 执行 ， 而 do…while 循环 在 任何 条 件 下 至 少 
要 执行 一 次 。 

【 例 14-5-7】 使 用 do…while 循环 计算 1 一 100 的 数字 之 和 。 代 码 如 下 所 示 ， 页 面 效果 
如 图 14-22 所 示 。 | 


1 二 人 一 14 5 了 bl —> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 视频 讲解 
5 <meta charset="UTF-8"> 

6 <title>do-while 循 环 的 应 用 </title> 

7 </head> 

8 <body> 

9 <script type="text/javascript"> 

10 var i=1,sum=0; // 定 义 初始 化 表达 式 

ip do // 先 执行 一 遍 循 环 体 语句 

和 之 { 

和 sum= sum + i; // 计 算 累 加 和 

14 至 二 证 证 // 定 义 循环 表达 式 

15 }while (i <= 100) // 定 义 判断 表达 式 

16 document .write (" 用 do-while 循 环 计算 1 一 100 之 间 所 有 数字 之 和 ="+sum) ; 
3 </script> 

18 </body> 

19 </html> 

3) 代码 解释 


【 例 14-5-7】 和 【 例 14-5-5】 的 作用 相同 ， 都 是 求 1 一 100 的 数字 之 和 。 


Ee dei 。 x 上 GE 






































14-22 do…while 语句 使 用 实例 


4. for…in 循环 
在 JavaScript 中 ， 除 了 for 语句 可 以 用 于 控制 循环 结构 以 外 ， 还 有 另 一 种 形式 的 for 语 
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句 ， 主 要 用 于 数组 、 集 合 对 象 的 遍历 ， 也 需要 循环 执行 某 一 段 代 码 ， 即 for…in 循环 。 
1) 基本 语法 


for (variable in object) 


f 





| 需要 循环 执行 的 代码 
) 语法 说 明 

variable 可 以 是 一 个 变量 名 、 数 组 元 素 或 对 象 属性 ，object 可 以 是 一 个 对 象 名 或 者 计算 
结果 为 对 象 的 表达 式 。for…in 循环 将 对 object 对 象 的 每 一 个 属性 或 每 一 元 素 都 执行 一 次 循 
环 ， 在 循环 过 程 中 ， 首 先 将 object 对 象 的 一 个 属性 名 作为 字符 串 赋 给 变量 variable， 这 样 在 
循环 体内 就 可 以 通过 变量 variable 访问 对 象 属性 。 

【 例 14-5-8】 使 用 for…in 循环 列 出 Screen 本 几 抽 和 司 人 本 汪 入 浊 当 人 和 各 三 汪 < 
代码 如 下 所 示 ， 页 面 效 果 如 图 14-23 所 示 。 


0 
01 <!-- edu 14 5 8.html --> 二 后 
一 一 一 了 

本 






02 <!doctype html> 9 
03 <html lang="en"> 

04 <head> 视频 讲解 
05 <meta charset="UTF-8"> 

06 <title>for-in 循 环 的 应 用 </title> 


07 </head> 
08 <body> 


09 <script type="text/javascript"> 

10 var i = 1; // 定 义 计数 器 变量 

11 document .write ("<h3>document 对 象 所 有 属性 名 称 /属性 值 : </h3>"); 
12 // 遍 历 对 象 的 所 有 属性 

13 for (var property in screen) 

14 { 

5 document .write (i+"."+property+"/"+screen [property]+" "); 
16 if (i 名 2 ==0) {document .write ("<br/>");} // 每 行 输出 两 对 
1 Et 

18 } 

19 // 遍 历数 组 对 象 的 所 有 元 素 

20 var stu=new Array (" 王 春平 ", "张宏伟 ", " 金 一 多 "," 李 大 为 "," 任 小 月 "," 储 忠 庆 ") ; 
21 var j=1;// 定 义 计数 器 j 

22 document .write ("<h3> 数 组 的 元 素 分 别 为 : </h3>"); 

23 for (var student in stu) 

24 { 

2 和 document .write(j+"."+stu[student]+" "); 

26 Eh 芝 生 沽 ==0) {document .write ("<br/>");} // 每 行 输出 两 对 
有 j++ 

28 } 

29 </script> 

30 </body> 

31 </html> 

3) 代码 解释 


代码 中 第 12 行 一 第 18 行使 用 变量 property 遍历 输出 屏幕 screen 对 象 的 所 有 属性 及 属 
性 值 。 第 19 行 一 第 28 行使 用 变量 student 遍历 输出 stu 数组 对 象 的 所 有 元 素 。 

5. 循环 的 典 套 

一 个 循环 内 又 包含 着 另 一 个 完整 的 循环 结构 ， 称 为 循环 嵌 套 。 内 嵌 的 循环 中 还 可 继续 





嵌 套 别 的 循环 ， 这 就 构成 多 重 循环 结构 。 


所 示 。 


1 Xl== da 14 5 9.htnl ==> 
2 <!doctype html> 


|@ Ne///FJWeb 二 开 闪 技术 -条 3 浙 -20170518/ 要 子 琶 列 及 如 芋 /chl4/edu_14.5.8html 嫌 | 


document 对 煞 所 有 属性 名 称 /属性 值 : 


| LavaiWwidth/1440 2.availteight/s60 
3.width/1440 4.height/900 
S.colorDepth/24 6.pixelDepth/24 








图 14-23 for…in 循环 使 用 实例 


【 例 14-S-9】 计 算 1! +2! +3! +4! +5! 的 和 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-24 


国家 Ye 
9 





3 <html lang="en"> 


<head> 视频 讲解 


4 
5 <meta charset="UTF-8"> 
6 <title> 计 算 1! +2! +3! +4! +5! 的 和 </title> 
于 </head> 
8 <body> 
9 <script type="text/javascript"> 
10 document .write ("计算 1! +2! +3! +4! +5! 的 和 <br/>"); 
1 for (i=1,sum=0;i<=5 ;i++ ) 
12 . 
本 3 for (j=1,cj=1;j<=i ;j++ ) 
14 { 
15 cj=cj*j; 
16 } 
3 了 document .write (i+"!="+cj+"<br/>"); 
18 sum=sum+cj; 
19 } 
20 document .write("1! +2! +3! +4! +5! ="+sum); 
和 </script> 
22 </body> 
23 </html> 
代码 解释 


代码 中 第 11 一 19 行 是 外 层 for 循环 ， 计 算 连 续 若 干 个 数 的 阶乘 的 和 ; 第 13 一 16 行 是 
内 层 for 循环 ， 计 算 N!。 第 17 行 外 循环 每 执行 1 次 就 输出 循环 变量 的 阶乘 值 。 








1 42! 33! +4! +5! =153 


第 
图 14-24 计算 1! +2! +3! +4! +5! 的 和 14 
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6. 循环 中 断 与 继续 
在 正常 的 循环 结构 中 , 每 次 循环 都 是 从 满足 条 件 开始 直到 不 满足 条 件 结束 , 也 就 是 说 ， 
必须 完整 地 执行 完 所 有 的 循环 。 但 在 实际 问题 中 有 时 并 不 需要 完整 执行 完 所 有 循环 才 结 束 
程序 , 可 能 遇 到 一 些 需 要 提前 中 止 或 跳 过 某 些 循环 等 情况 , 这 时 需要 使 用 break 和 continue 
语句 来 解决 实际 问题 。 
在 循环 体 中 break 语句 的 作用 是 立即 结束 循环 ， 跳 转 到 循环 后 面 的 语句 ， 而 不 管 原来 
的 循环 还 有 多 少 次 ， 都 不 会 再 执行 。 在 循环 体 中 continue 语句 的 作用 ee ， 本 
次 循环 后 面 的 所 有 语句 都 不 会 执行 ， 直 接 进入 下 一 次 循环 ， 直 到 循环 结 
【 例 14-5-10】 计算 5!1 +6! +…+n! 的 和 (S<n<15)。 代 码 如 下 所 示 ， Re 14-25 
和 图 14-26 所 示 。 
1 <!-- edu 14 5 10.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

与 <meta charset="UTF-8"> 

6 <title> 计 算 部 分 XN! 的 和 </title> 

7 </head> 

8 <body> 

9 <script type="text/javascript"> 

10 document .write ("计算 部 分 7N! 的 和 <br/>"); 

FE var n = prompt ("请 输入 整数 N: ",20); 

2 for (i=1,sum=0;i<=n ;i++ ) 

13 { 

14 if (i>15) {break;} // 当 循环 到 第 15 次 时 跳出 循环 
15 // 当 i 为 1-5 之 间 的 数 时 结束 本 次 循环 进入 下 1 次 循环 
16 if (i>=1 && i<5){ 

17 continue; 

18 }else{ ”// 当 i 大 于 等 于 5 时 执行 循环 

主人 for (j=1,cj=1;j<=i ;j++ ) 

20 { 

cj=cj*j; // 计 算 阶 乘 

2 } 

3 document .write (i+"!="+cj+"<br/>"); 
24 sum=sum+cj; // 累 加 阶乘 之 和 

25 } 

26 } 

27 i=i-1 

28 document .write ("Fy"+i+"!="+sum); 

29 </acript> 

30 </body> 

31 </html> 























本 
请 输入 总 才 1 EE 
夯 151=1401602636280 




















图 14-25 提示 信息 框 界面 图 14-26 计算 5! +6! +…+N! 的 和 





运行 代码 后 ， 首 先 弹 出 提示 信息 框 ， 要 求 输入 整数 N 的 值 ， 默 认 值 为 20， 如 图 14-25 
所 示 。 单 击 “确定 ”按钮 后 ，N 取 默 认 值 20 后 ， 计 算 部 分 ZN! 的 和 ， 如 图 14-26 所 示 。 

代码 解释 

代码 中 第 11 行 定义 变量 n， 并 通过 prompt0 方 法 给 变量 n 赋值 〈 设 默认 值 为 20); 第 
12 一 26 行 是 外 层 for 循环 ， 计 算 连 续 若 干 个 数 的 阶乘 的 和 ; 第 14 行 采用 单 分 支 自 语 句 判 
断 当 变量 i 的 值 大 于 15 时 执行 break 语句 , 立即 结束 循环 ， 即 跳出 外 层 循 环 ， 从 第 27 行 代 
码 开始 执行 ,如 果 i 的 值 小 于 等 于 15 时 , 则 继续 执行 外 循环 ; 第 16 一 25 行 采用 双 分 支 f… 
else 结构 根据 变量 i 的 取 值 范围 是 否 在 [1, 4] 之 间 来 判断 是 否 结束 本 次 循环 直接 进入 下 一 次 
循环 。 如 果 在 此 区 间 内 ， 执 行 continue 语句 ， 结 束 本 次 循环 ， 后面 所 有 语句 此 次 不 再 执行 ， 
开始 下 一 次 循环 ， 直 到 结束 ; 如 果 不 在 此 区 间 ， 则 执行 内 循环 第 19 一 22 行 是 内 层 for 循 
环 ， 计 算 变 量 j!， 结 果 保 存在 变量 cj 里 。 第 23 行 外 循环 每 执行 一 次 就 输出 循环 变量 的 阶 
乘 值 。 














14.6 JavaScript 函数 


JavaScript 图 数 分 为 系统 内 部 函数 和 系统 对 象 定义 的 函数 及 用 户 自 定义 函数 。 函 数 就 是 
完成 一 个 特定 的 功能 的 程序 代码 。 函 数 只 需要 定义 一 次 ， 可 以 多 次 使 用 ， 从 而 提高 程序 代 
码 的 复 用 率 ， 既 减轻 开发 人 员 的 负担 ， 又 降低 了 代码 的 重复 度 。 

函数 需要 先 定义 后 使 用 ，JavaScript 函数 一 般 定义 在 HTML 文件 的 头 部 head 标记 或 外 
部 JS 文件 中 ， 而 函数 的 调用 可 以 在 HTML 文件 的 主体 body 标记 中 的 任何 位 置 。 


14.6.1 常用 系统 函数 


JavaScript 中 有 许多 预先 定义 的 系统 内 部 函数 和 对 象 定 义 的 函数 ， 如 document.write() 
就 是 其 中 之 一 。 这 些 预定 义 的 系统 函数 大 多 数 存 在 于 预定 义 的 对 象 中 ， 例 如 String、Date、 
Math、window 及 document 对 象 中 都 有 很 多 预定 义 的 函数 ， 只 有 熟练 使 用 这 些 函 数 才能 充 
分 发 挥 JavaScript 的 强大 功能 ， 简 洁 、 高 效 地 完成 程序 设计 任务 。 

常用 系统 函数 分 全 局 函数 和 对 象 定义 的 函数 。 全 局 函数 它 不 属于 任何 一 个 内 置 对 象 ， 
使 用 时 不 需要 加 任何 对 象 名 称 ， 直 接 调用 。 例 如 eval)、escapeO、unescape()、parseFloat()、 
parseInt()、isNaN() 等 。 全 局 函数 如 表 14-13 所 示 。 对 象 定 义 的 函数 依赖 于 对 象 ， 使 用 时 需 
要 加 对 象 名 称 ( 顶 层 对 象 window 除外 ), 例如 alert0、confirm(0、promptO 等 函数 是 window 
对 象 定义 的 函数 。document.write0) 是 document 对 象 的 方法 。 


表 14-13 全 局 函数 名 称 与 说 明 对 照 表 


























函数 说 了 明 
decodeURIO 解码 某 个 编码 的 URI 
decodeURIComponentO 解码 一 个 编码 的 URI 组 件 
encodeURIO 把 字符 串 编 码 为 URI 
encodeURIComponentO 把 字符 串 编码 为 URI 组 件 
eval0 计算 JavaScript 字符 串 ， 并 把 它 作为 脚本 代码 来 执行 
escape0) 对 字符 串 进行 编码 
unescape() 对 由 escape0 编 码 的 字符 串 进行 解码 





JavaScript 洽 础 


Web 育 弦 开 营 故 大 一 TIMTI、CSS3、JavaScript ( 筑 3 族 ) 






续 表 









数 





函 
parseFloat() 
parseInt() 


说 了 明 
解析 一 个 字符 串 并 返回 一 个 浮 点 数 
解析 一 个 字符 串 并 返回 一 个 整数 

























getClass() 返回 一 个 JavaObject 的 JavaClass 
isNaNO 检查 某 个 值 是 否 是 非 数 

isFinite() 检查 某 个 值 是 否 为 有 穷 大 的 数 
Number0 把 对 象 的 值 转换 为 数字 





把 对 象 的 值 转换 为 字符 串 
重点 介绍 常用 的 全 局 函数 和 常用 的 对 象 函数 。 








1) 计算 表达 式 的 结果 函数 
(1) 基本 语法 。 


eval (string) 


(2) 语法 说 明 。 

eval0 函 数 的 作用 是 返回 字符 串 string 表达 式 中 的 值 。 该 函数 接受 原始 字符 串 作为 参数 ， 
将 该 字符 串 作 为 代码 在 上 下 文 环境 中 执行 ， 并 返回 执行 结果 。 

(3) 参数 说 明 。 

string: 要 计算 的 字符 串 表 达 式 ， 含 有 要 计算 的 JavaScript 表达 式 或 要 执行 的 语句 。 

【 例 14-6-1】eval 函数 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 14-27 所 示 。 


1 <!-- edu 14 6 1.html --> 
2 <!doctype html> 






3 <html lang="en"> 加 i 
4 <head> > 
入 <meta charset="UTF-8"> 视频 讲解 
6 <title>eval () 函数 的 应 用 </title> 
学 </head> 
8 <body> 
9 <h4>eval () 函数 的 应 用 </h4> 
10 <script type="text/javascript"> 
和 和 eval ("x=20;y=30;document .write('x="'+x+", y="+y+", Xx*y="+x*y) "); 
2 document .write("<br/>"); 
ls document .write("2+2="+eval ("2+2")); 
14 var abce; // 声 明 变量 未 赋值 
15 document .write ("<br/>abce="+eval (abce)); 
16 </script> 
生 仑 </body> 
18 </html> 


(4) 代码 解释 。 

代码 中 第 11 行 中 eval0 函 数 的 参数 是 代码 ， 在 上 下 文 环境 下 执行 ， 并 返回 x*y 的 计算 
结果 ， 并 输出 到 页 面 上 ; 第 13 行 中 evalO 函 数 的 参数 是 表达 式 ， 计 算 2+2 的 值 并 输出 到 页 
面 上 ; 第 15 行 中 evalO 函 数 的 参数 不 是 表达 式 ， 而 是 只 定义 未 赋值 的 变量 abce， 所 以 返回 
结果 为 undefined。 











Ow 3 -ox]emmammen x| 





参数 为 代码 
参数 为 表达 式 
参数 为 变量 





图 14-27 eval0 函 数 使 用 实例 


2) 编码 与 解码 函数 
。 编码 函数 escape()。 
(1) 基本 语法 。 


escape (string) 


(2) 语法 说 明 。 

escape() 函 数 可 对 字符 串 (ISO-Latin-l 字符 集 ) 进行 编码 ,这样 就 可 以 在 所 有 的 计算 机 
上 读 取 该 字符 串 。 该 函数 不 会 对 ASCII 字符 和 数字 进行 编码 , 也 不 会 对 下 面 这些 ASCII 标 
点 符号 进行 编码 : + @ 一 _+./ 。 其 他 所 有 的 字符 都 会 被 转 义 序列 替换 。 

(3) 参数 说 明 。 

string: 要 被 转 义 或 编码 的 字符 串 。 

【 例 14-6-2】 ee 有 区 的 度 几 。 代码 如 下 所 示 ， 页 面 效果 如 图 14-28 所 示 。 


码 后 为 ，JavaSeripwu7F16%u7A0B%21 视频 讲解 
:Mo920Cbu9209o4F60%u597D%621 





图 14-28 escapeO 函 数 使 用 实例 


1 <!-- edu 14 6 2.html --> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

号 <meta charset="UTF-8"> 

6 <title>escape () 函数 的 应 用 </title> 

了 </head> 

8 <body> 

9 <h4>escape () 函数 的 应 用 </h4> 

10 <script type="text/javascript"> 

11 document .write ("\"?2\" 进 行 编码 后 为 :"+escape ("?")+"<br/>"); 
12 document .write ("\"JavaScript 编 程 ! \" 编 码 后 为 : "+escape ("JavaScript 

编程 1") ) ; 
13 document .write ("<br/>Mr Chu 你 好 !"+" 编 码 后 为 :"+escape ("Mr Chu 
你 好 !") ) 

14 </script> 
35 </body> 
16 </html> 
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(4) 代码 解释 。 

代码 中 第 11 行 中 对 字符 “?” 进 行 编码 ， 由 于 “?” 的 ASCII 码 为 63， 转 换 为 十 六 进 
制 为 3F, 因 此 输出 *%3F”; 第 12 行 对 字符 串 " JavaScript 编程 ”进行 编码 ,这 当中 " JavaScript” 
是 字母 ， 因 此 不 编码 ， 而 其 他 字符 则 进行 了 编码 ， 汉 字 是 双 字 节 编 码 ， 格 式 为 “9%u”+ 两 
个 字 节 的 十 六 进 制 数据 ， 如 “ 编 ” 的 编码 %u7F16; 第 13 行 对 空格 和 汉字 进行 编码 ， 空 格 
编码 为 %20。 

。 解码 函数 unescape()。 

(1) 基本 语法 。 


unescape (string) 


(2) 语法 说 明 。 

unescape() 函 数 返 回 的 字符 串 是 ISO-Latin-1 字符 集 的 字符 。 该 函数 通过 找到 形式 为 %xx 
和 %uxxxx 的 字符 序列 (x 表示 十 六 进 制 的 数字 )， 用 字符 \u00xx 和 \uxxxx 替换 这 样 的 
字符 序列 进行 解码 。 

(3) 参数 说 明 。 

string: 要 解码 或 反 转 义 的 字符 串 。 

【 例 14-6-3】 使 用 unescape0 函 数 对 经 过 编码 的 字符 进行 解码 。 代 码 如 下 所 示 ， 页 面 效 
果 如 图 14-29 所 示 。 






| 





Be Mh 十 2 
站 RWebM 戎 开 二 PO X | 后 unescape EA 多 
mescape() 函 数 的 应 用 视频 讲解 
"%3F" 解 码 后 为 ，? 
JavaScriptywu7F16%u7A0B%21 解 码 后 为 ，JavaScript 编 程 ! 
图 14-29 unescape0 函 数 使 用 实例 
1 <l== ed 14 6 3.html ==> 
2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
号 <meta charset="UTF-8"> 
6 <title>unescape () 函数 的 应 用 </title> 
7 </head> 
8 <body> 
9 <h4>unescape () 函数 的 应 用 </h4> 
10 <script type="text/javascript"> 
11 document .write("\"%3F\ "解码 后 为 : " + unescape ("%3F") + "<br/>"); 
12 document .write ("JavaScript%u7F16%u7A0B%21 解 码 后 为 : "+unescape 
("JavaScript%u7F16%u7AO0BS21")); 
和 </script> 
14 </body> 
15 </html> 


(4) 代码 解释 。 

代码 中 第 11 行 中 对 “%3F ”进行 解码 ,得 到 的 结果 为 <^? ”; 第 12 行 对 字符 串 “JavaScript% 
u7F16%u7A0B%21” 进 行 解码 ， 得 到 的 结果 为 “JavaScript 编程 1”。 

3) 字符 型 转换 成 数值 型 函数 。 

。 parseFloatO 函 数 。 


(1) 基本 语法 。 
parseFloat (string) 


(2) 语法 说 明 。 


parseFloat() 函 数 的 作用 是 返回 string 字符 串 对 应 的 实数 值 。 只 有 字符 串 中 的 第 一 个 数 
字 会 被 返回 ， 如 果 字 符 串 string 的 第 一 个 字符 不 能 被 转换 为 数字 ， 那 么 parseFloat() 函 数 会 


返回 NaN。 
(3) 参数 说 明 。 
string: 要 被 解析 的 字符 串 。 





【 例 14-6-4】parseFloatO 函 数 的 应 用 。 代 码 如 下 所 示 ， 其 页 面 效果 如 图 14-30 所 示 。 


1 <!-- edu 14 6 4.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

入 <meta charset="UTF-8"> 视频 讲解 

6 <title>parseFloat () 函数 的 应 用 </title> 

量 </head> 

8 <body> 

9 <h4>parseFloat () 函数 的 应 用 </h4> 

10 <script type="text/javascript"> 

本 document .write ("\"100N" 转 换 后 为 : "+parseFloat ("100")+"<br/>"); 
12 document .write("\"100.00\" 转 换 后 为 : "+parseFloat ("100.00")+"<br/>"); 
二 document .write ("\"100.88\" 转 换 后 为 ， "+parseFloat ("100.88")+"<br/>"); 
14 document .write ("\"12 34 56\ "转换 后 为 : "+parseFloat ("12 34 56") +"<br/>") 7 
15 document .write("\" 60\ "转换 后 为 : "+parseFloat (" 60 ")+"<br/>"); 
16 document .write("\"40 years\" 转 换 后 为 :"+parseFloat ("40 years")+"<br/>"); 
汪汪 document .write ("\" 衣 服 100 元 \" 转 换 后 为 : "tparseFloat ("衣服 100 元 ")+"<br/>"); 
18 </script> 

19 </body> 
20 </html> 
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parseFloat( ) 函 数 的 应 用 

"100 转 换 后 为， 100 


"40 yeaxs 转换 后 为 ，40 
外 衣服 100 元 "转换 后 为 ，NaN 





图 14-30 parseFloatO 函 数 使 用 实例 
(4) 代码 解释 。 


代码 中 第 11 行将 一 个 整数 100 字符 串 转 换 为 实数 ， 输 出 100; 第 12 行 转换 一 个 实数 
100.00 字符 串 转化 为 实数 ， 由 于 小 数 部 分 为 0.00， 因 此 输出 时 被 省 略 ， 结 果 为 100; 第 13 


行 的 实数 100.88 字符 串 转 换 为 100.88， 输 出 也 是 100.88; 第 14 行 有 三 个 用 空格 分 隔 的 整 
数字 符 串 ， 解 析 后 只 能 将 第 1 个 数 12 转换 为 实数 ， 空 格 开始 向 后 全 部 忽略 ， 所 以 输出 为 


12; 第 15 行 的 数字 60 前 后 各 有 一 个 空格 , 转换 时 前 面 的 空格 被 忽略 ， 因 此 输出 60; 第 16 


行 只 转换 空格 前 的 数字 ,输出 40; 第 17 行 第 1 个 是 字符 不 能 被 转换 为 数字 ， 








因 








此 输出 NaN。 
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。 parseImt(O 函 数 。 
(1) 基本 语法 。 


parseInt (string,radix) 


(2) 语法 说 明 。 

parseInt() 函 数 的 作用 是 返回 string 字符 串 对 应 的 十 进 制 整数 值 , 参数 radix 用 于 指定 数 
字 的 基数 。 只 有 字符 串 中 的 第 1 个 数字 会 被 返回 ， 如 果 字符 串 的 第 1 个 字符 不 能 被 转换 为 
数字 ， 那 么 parseInt(0) 函 数 会 返回 NaN。 

(3) 参数 说 明 。 

parseInt() 函 数 的 参数 及 说 明 如 表 14-14 所 示 。 


表 14-14 parseInt0 函 数 参 数 及 说 明 


参数 说 明 
string 要 被 解析 的 字符 串 
表示 要 解析 的 数字 的 基数 。 该 值 介 于 2 一 36 之 间 
如 果 省 略 该 参数 或 其 值 为 0， 则 数字 将 以 10 为 基数 来 解析 
Tadix 如 果 它 以 0 开头 ， 将 以 8 为 基数 


如 果 它 以 0x 或 0X 开头 ,将 以 16 为 基数 
如 果 该 参数 小 于 2 或 者 大 于 36， 则 parseInt0 将 返回 NaN 





Parselat 乓 数 的 应 用 


“10 打 接 为 副 数 结 时 为 ，10 

十 进 制 "63 转 横 为 整数 结果 为 ，63 
二 进 制 '11 转 换 为 束 玉 结 果 为 ，3 

八进制 "15 苇 执 为 到 及 结果 为 ，13 
十 六 进 制 "1f 持 的 为 些 数 早 果 为 ，31 


010 转换 为 整数 早 果 为 ，$ 
咱 定 价 为 30 元 转换 为 蔡 数 结果 为 ，NaN 








图 14-31 parseIntO 函 数 使 用 实例 


1 <!-- edu 14 6 5.html --> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
号 <meta charset="UTF-8"> 
6 <title>parseInt () 函数 的 应 用 </title> 
7 </head> 
8 <body> 
9 <h4>parseInt () 函数 的 应 用 </h4> 
10 <script type="text/javascript"> 
和 document .write ("\"10N" 转 换 为 整数 结果 为 : "+parseInt ("10")+"<br>"); 
FE document .write ("十 进 汕 \"63\ "转换 为 整数 结果 为 :"+parseInt ("63",10)+"<br>"); 
13 document .write ("二 进 制 \"11\ "转换 为 整数 结果 为 :"+parseInt ("11",2)+ 
a 
14 document .write ("八进制 \"15\ "转换 为 整数 结果 为 :"+parseInt ("15", 8)+ 
WE 
15 document .write ("十 六 进 制 \"1f\ "转换 为 整数 结果 为 : "+parseInt ("1f",16)+ 


Wehr Ss 


16 document .write ("\"010\" 转 换 为 整数 结果 为 : "+parseInt ("010") +"<br>") 7 


17 document -write ("\" 书 定价 为 30 元 \" 转 换 为 整数 结果 为 :"+parseInt (" 书 定价 
为 30 元 ") +"<br />"); 

18 </script> 

19 </body> 

20 </html> 


(4) 代码 解释 。 

代码 中 第 11 行 省 略 函 数 的 第 2 个 参数 ， 默 认为 十 进 制 ， 输 出 结果 为 10; 第 12 行 指定 
63 为 十 进 制 ， 输 出 结果 为 63; 第 13 行 指定 11 为 二 进 制 ， 输 出 结果 为 3; 第 14 行 指定 15 
为 八进制 ， 输 出 结果 为 13; 第 15 行 指定 1f 为 十 六 进 制 ， 输 出 结果 为 31; 第 16 行 010 以 
0 开头, 表示 是 八进制 , 输出 结果 为 8; 第 17 行 第 1 个 字符 不 能 被 转换 为 数字 ,输出 NaN。 

4) 判断 是 否 是 NaN 函数 

(1) 基本 语法 。 


isNaN (string) 


(2) 语法 说 明 。 

isNaN0O) 函 数 的 作用 是 判断 string 是 否 为 数值 ， 如 果 string 是 特殊 的 非 数 字 值 NaN (或 
者 能 被 转换 为 这 样 的 值 )， 返 回 的 值 就 是 tue。 如 果 string 是 其 他 值 ， 则 返回 false。 

(3) 参数 说 明 。 

string: 要 检测 的 值 。 

【 例 14-6-6】isNaNO 函 数 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-32 所 示 。 


1 <!-- edu 14 6 6.html --> 
2 <!doctype html> 
3 <html lang="en"> 














4 <head> 2 
每 <meta charset="UTF-8"> 视频 讲解 
6 <title>isNaN () 函数 的 应 用 </title> 
7 </head> 
8 <body> 
9 <h4>isNaN () 函数 的 应 用 </h4> 
10 <script type="text/javascript"> 
市 document .write("\"40N\" 是 否 是 非 数值 :"+isNaN (40) +"<br>") ; 
12 document .write("\"3*30N\" 是 否 是 非 数 值 :"+isNaN (3*30) +"<br>") 7 
13 document .write ("\"UavaScript\" 是 否 是 非 数值 :"+isNaN ("JavaScript") ) 7 
14 </script> 
5 </body> 
16 </html> 

MS wbss 2 

isNaNO 函 数 的 应 用 

"40" 是 否 是 非 数 值 fake 

?3*30" 是 否 是 非 数值 fakse 

JavaScripe 是 否 是 非 数 值 ue 

图 14-32 isNaNO 函 数 使 用 实例 

(4) 代码 解释 。 第 
代码 中 第 11 行 的 40 是 数值 ， 返 回 false; 第 12 行 的 “3*30” 可 以 转换 为 数值 ， 返 回 | 14 
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false; 第 13 行 的 JavaScript 不 可 以 转换 为 数值 ， 返 回 true。 

2. 常用 的 对 象 函数 

(1) toString(radix)。 将 Number 型 数据 转换 为 字符 型 数据 ， 并 返回 指定 的 基数 的 结果 。 
其 中 radix 范围 2 一 36， 若 省 略 该 参数 ， 则 使 用 基数 10。 例 如 

var a = 12; 


alert (a.toString (2));  // 告 警 框 输出 结果 为 1100〈 二 进 制 ) 
alert (a.tostring()); // 告 警 框 输出 结果 为 12 (默认 的 十 进 制 ) 


(2) toFixed(n)。 将 浮 点 数 转换 为 固定 小 数 点 位 数 的 数字 。n 是 整数 ， 设 置 小 数 的 位 数 ， 
如 果 省 略 了 该 参数 ， 将 用 0 代替 。 例 如 : 
var a = 2016.1567; 


alert (a.toFixed (2)); // 保 留 2 位 小 数 ， 告 警 框 输出 结果 为 2016. 16 
alert (a.toFixed (5)); // 保 留 5 位 小 数 ， 告 警 框 输出 结果 为 2016.15670 


(3) 字符 串 查找 和 提取 常用 函数 。 
字符 串 对 象 提 供 了 一 系列 字符 串 查 找 和 提取 的 方法 ， 如 表 14-15 所 示 。 


表 14-15 String 对 象 查找 与 提取 方法 及 说 明 

说 明 
从 前 向 后 搜索 字符 串 。 返 回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 
现 的 位 置 ， 如 果 没 有 发 现 ， 返 回 -1 
从 后 向 前 搜索 字符 串 。 返 回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 ， 
如 果 没 有 发 现 ， 返 回 -1 


方 法 
indexOf(searchvalue,fromindex) 


lastIndexOf(searchvalue,fromindex) 





charAt(index) 返回 在 指定 位 置 的 字符 
substring(start,stop) 用 于 提取 从 start 到 end (不 包括 该 元 素 ) 之 间 的 字符 串 


在 开发 Web 应 用 程序 过 程 中 ， 经 常 需要 对 用 户 输入 的 数据 进行 有 效 性 、 合 法 性 验证 。 
通过 程序 提取 用 户 输入 的 数据 ， 然 后 对 提取 的 字符 串 进行 适当 处 理 。 如 判断 用 户 名 首 字 符 
是 否 为 字母 、 字 符 串 中 是 否 包 含 特定 字符 等 , 通过 String 对 象 提供 的 方法 可 以 很 容易 实现 。 
举例 如 下 : 

Var str="Welcome to you!™"; 


var substr=str.substring (3, 6); // 从 第 0 个 字符 开始 数 ， 第 3 个 到 第 6 个 之 间 字 符 为 "com" 
var somestr=str.charAt (4); // 从 第 0 个 字符 开始 数 ， 取 第 4 个 字符 结果 是 "o" 


【 例 14-6-7】 判断 邮箱 地 址 的 合法 性 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-33 所 示 。 


1 <!-- edu 14 6 7.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 验 证 邮箱 的 合法 性 </title> 

和 <script type="text/javascript"> 

8 function emailCheck() 

9 { 

10 // 获 取 用 户 输入 的 邮箱 地 址 相关 信息 , 仅 验证 最 多 有 两 个 " . "号 

了 Var emailString=document .forml .email.value; 


3 var emailLength=emailString.length; 


生子 Var indexl=emailString.indexOf ("@"); 





14 var index2=emailString.indexOf ("."); // 取 第 1 个 点 

FM var index3=emailString.lastIndex0Of (".");// 取 最 后 一 个 点 

16 var msg=" 验 证 邮箱 地 址 实例 :\n\n"; 

17 msg+=" 邮 箱 地 址 :"+emailstring+"\n"; 

18 msg+=" 验 证 信息 :"; 

19 var emailFlag=false; 

20 /* 返回 相关 验证 信息 

天 首先 判断 邮箱 中 必须 有 e 和 . ， 且 @ 必 须 在 前 ，. 在 后 ; 

22 @ 不 能 为 首 字符 ，. 不 能 为 最 后 一 个 字符 */ 

23 if (indexl!=-1 && index3!=-1 && index3>indexl+2 && indexl!=0 
&& index3!=emailLength-1) 

24 { // 然 后 判断 有 几 个 点 号 

25 if (index2==index3) 

26 { // 只 有 一 个 

2 emailFlag= (index2>=index1+3) ?true:false; 

28 }else{// 有 两 个 以 上 

29 emailFlag= (index3>=index2+3 && index2>=index1+3) ? 

true:false; 

30 } 

31 lelsel{ 

32 emailFlag=false; 

33 } 

34 if(!emailFlag) 

35 { 

36 msg+=" 邮 箱 地 址 不 合法 !\n\n" 

37 msg+=" 不 能 同时 满足 如 下 条 件 : \n"; 

38 msg+="1、 邮 件 地 址 中 同时 含有 '@' 和 ' .' 字 符 ;\n"; 

39 msg+="2、'@' 后 必须 有 ' .'， 且 中 间 至 少 间隔 一 个 字符 ;，\n" 

40 msg+="3、'@' 不 为 第 一 个 字符 ，' . ' 不 为 最 后 一 个 字符 。\n" 

41 } 

42 else 

43 和 f 

44 msg+=" 邮 箱 地 址 合法 !\n\n"; 

45 msg+=" 能 同时 满足 如 下 条 件 :\n"; 

46 msg+="1、 邮 件 地 址 中 同时 含有 ' @' 和 ' .' 字 符 ;，\n"; 

47 msg+="2、'@' 后 必须 有 ' .'， 且 中 间 至 少 间隔 一 个 字符 ;，\n" 

48 msg+="3、'@' 不 为 第 一 个 字符 ，' . ' 不 为 最 后 一 个 字符 。\n" 

49 } 

50 alert (msg); 

51 } 

52 </script> 


53 </head> 
54 <body> 


55 <form name="form1"> 

56 邮箱 地 址 :<input type="text" name="email" value="@"> 

5 了 <input type="button™" value=" 验 证 邮箱 地 址 "onclick="emailCheck () "> 
58 </form> 

与 外 </body> 

60 </html> 


上 述 代码 中 第 8 一 51 行 定义 了 一 个 JavaScript 函数 名 为 emailCheckO; 第 56 行 定义 了 
一 个 文本 输入 框 给 用 户 输入 Email 地 址 ; 第 57 行 定义 了 一 个 普通 按钮 并 为 按钮 设置 了 
onClick 事件 句柄 。 在 文本 输入 框 中 输入 Email， 单 击 按钮 时 会 触发 Click 事件 调用 
emailCheck0 函 数 验 证 Email 是 否 符合 标准 。 如 果 输入 的 Email 是 不 合法 的 , 如 asd@1223e， 
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则 弹出 “邮箱 地 址 不 合法 ! ”的 信息 ; 如 果 输 入 的 Email 是 合法 的 ， 如 testemial@163.com， 
则 弹出 “邮箱 地 址 合法 ”的 信息 。 
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图 14-33 ”验证 邮箱 合法 性 时 告警 信息 窗口 


14.6.2” 自 定义 函数 


函数 定义 

函数 是 由 事件 驱动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 
1) 基本 语法 

1 function functionname (argument]1,argument2,..., argumentn) 
2 { 

3 这 里 是 要 执行 的 代码 〈 也 称 为 函数 体 ) ; 

4 } 


2) 语法 说 明 

。 函数 就 是 包括 在 大 括号 中 的 代码 块 , 使 用 关键 词 function 来 定义 。 当 调用 该 函数 时 ， 
会 执行 函数 内 的 代码 。 

在 调用 函数 时 , 可 以 向 其 传递 值 , 这 些 值 被 称 为 参数 。 这些 参 数 可 以 在 函数 中 使 用 。 
可 以 发 送 任意 多 的 参数 , 参数 之 间 由 逗号 分 阳 。 也 可 以 没有 参数 , 但 括号 不 能 省 略 ， 
。 函数 体 必须 写 在 “{” 和 “}” 内 ,“{”“}” 定 义 了 函数 的 开始 和 结束 。 

JavaScript 中 区 分 字母 大 小 写 ， 因 此 “function” 这 个 词 必须 全 部 字母 小 写 ， 否 则 程 
序 就 会 出 错 。 另 外 需要 注意 的 是 ， 必 须 使 用 大 小 写 完全 相同 的 函数 名 来 调用 函数 。 
【 例 14-6-8】 自 定义 求 梯形 面积 的 函数 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-34 所 示 。 
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图 14-34” 自 定义 函数 使 用 实例 


1 <!-- edu 14 6 8.html --> 

2 <!doctype html> 

3 <html lang="en"> 

4 <head> 

<meta charset="UTF-8"> 

6 <title> 自 定义 函数 的 应 用 </title> 

于 <script type="text/javascript"> 
8 function areal(la,b,c){ 


9 s=( (parseInt (a.value) +parseInt (b.value) ) /2*parselnt (c.value); 
10 alert ("梯形 的 面积 为 "+s); 
11 } 
12 </script> 


33 </head> 
14 <body> 


15 <form> 

16 上 底 :<input type="text" name="a"><br/> 

17 下 底 :<input type="text" name="b"><br/> 

18 高 度 :<input type="text" name="c"><br/> 

19 &nbsp; gnbsp; gnbsp; &nbsp; <input type="button" onclick="area 
(avb,c)" value=" 求 面积 ">><br/> 

20 </form> 

21 </body> 

22 </html> 

3) 代码 解释 


代码 中 第 8 一 11 行 定义 了 有 参数 的 JavaScript 函数 area (a,b,c)， 三 个 参数 分 别 表示 梯 
形 的 上 底 、 下 底 和 高 ; 第 9 行将 三 个 文本 框 中 的 输入 数据 转换 成 整数 , 第 10 行 通过 告警 消 
息 框 输出 面积 ， 第 15 一 20 行 在 body 标记 中 插入 表单 ， 在 表单 中 插入 表单 元 素 : 三 个 文本 
输入 框 和 一 个 普通 按钮 ， 文 本 输入 框 用 于 输入 梯形 的 上 底 、 下 底 和 高 ， 普 通 按钮 用 于 调用 
自 定义 函数 area(a,b,c), 第 19 行 给 普通 按钮 的 onclick 事件 绑 定 事件 处 理 程序 , 完成 梯形 面 
积 的 计算 。 


14.6.3” 带 参数 返回 的 return 语句 


如 果 需 要 返回 函数 的 计算 结果 ， 可 以 使 用 带 参数 的 retum 语句 。 如 果 不 需要 返回 函数 
的 计算 结果 ， 则 使 用 不 带 参数 的 return 语句 。 

1. 基本 语法 

return 函数 执行 结果 ; ”// 有 返回 值 

return ; // 无 返回 值 , 此 句 可 有 可 无 

2. 语法 说 明 

es。 有 值 返回 的 函数 调用 方式 与 无 值 返回 的 调用 方式 略 有 不 同 。 无 值 返回 可 以 通过 事件 
触发 、 程 序 触发 等 方式 调用 ， 有 值 返回 的 函数 类 似 于 操作 数 ， 和 表达 式 一 样 时 可 以 
直接 参加 运算 ， 不 需要 通过 事件 或 程序 来 触发 。 

。 函数 体内 使 用 不 带 返 回 值 的 retum 语句 可 以 结束 程序 运行 ， 其 后 所 有 语句 均 不 再 执 
行 。returm 语句 只 能 返回 一 个 计算 结果 。returm 语句 后 可 以 跟 上 一 个 具体 的 值 ， 也 可 
以 是 一 个 变量 ， 还 可 以 是 一 个 复杂 的 表达 式 。 
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【 例 14-6-9】retum 语句 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 14-35 所 示 。 


1 <!-- edu 14 6 9.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
<meta charset="UTF-8"> 
6 <title>return 语 句 返 回 计 算 结 果 </title> 
<script type="text/javascript"> 
8 function showSum(){ 
9 document .write ("3+4+5 结 果 为 : "+plus (3, 4, 5) ); // 调 用 函数 
10 return; // 结 束 函数 
3 } 
12 function plus(a,b,c){ 
3 return atbt+tc; // 返 回 函数 结果 
14 } 
生生 </script> 


16 </head> 
17 <body> 


18 <h4> 计 算 3 个 数 的 和 </h4> 

19 <script type="text/javascript"> 
20 showSum(); 

21 </script> 

22 </body> 

23 </html> 

3. 代码 解释 


代码 中 第 8 一 14 行 定义 了 两 个 函数 ， 分 别 是 一 个 带 有 三 个 形式 参数 的 函数 plus(a,b,c) 
和 不 带 参 数 的 函数 showSum(); 在 plus(a,b,c) 函 数 体 中 就 一 条 retum 语句 ， 返回 三 个 数 累加 
和 ; 在 showSum() 函 数 体 中 先 调 用 plus(3.4.5) 函 数 ， 然 后 用 retur 结束 函数 的 运行 ， 第 20 
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计算 3 个 数 的 和 E 
3+4+5 结 果 为 ，12 = 


图 14-35 ”函数 返回 值 使 用 实例 


14.6.4 ”函数 变量 的 作用 城 


函数 体 是 完成 特定 功能 的 代码 段 ， 在 代码 执行 过 程 总 需要 使 用 一 些 存放 程序 运行 的 中 
间 结 果 的 变量 。 变 量 分 为 局 部 变量 和 全 局 变量 。 局 部 变量 是 指 在 函数 内 部 声明 的 变量 ， 该 
变量 只 能 在 一 段 程序 中 发 挥 作 用 ; 而 全 局 变量 是 指 在 函数 之 外 声明 的 变量 ， 该 变量 在 整个 
JavaScript 代码 中 发 挥 作用 ， 全 局 变量 的 生命 周期 从 声明 开始 ， 到 页 面 关闭 时 结束 。 

局 部 变量 和 全 局 变量 可 以 重 名 ， 也 就 是 说 ， 即 便 在 函数 体外 声明 了 一 个 变量 ， 在 函数 
体内 还 可 以 再 声明 一 个 同名 的 变量 。 在 函数 体内 部 ， 局 部 变量 的 优先 级 高 于 全 局 变量 ， 即 
在 函数 体内 ， 同 名 的 全 局 变量 被 隐藏 了 。 





需要 注意 的 是 ， 专 用 于 函数 体内 部 的 变量 一 定 要 用 var 关键 字 声明 ， 和 否则 该 变量 将 被 
定义 成 全 局 变量 ， 如 果 函 数 体外 部 有 同名 的 变量 ， 可 能 导致 该 全 局 变量 被 修改 。 
【 例 14-6-10】 变 量 的 作用 域 范围 。 代 码 如 下 所 示 ， 页 面 效果 如 图 14-36 所 示 。 


Ow 0x]|s < 





全 局 变量 和 局 部 变量 使 用 


局 部 净重 testl 的 值 为 200 
全 局 变量 tcstl 的 值 为 100 
全 局 变量 tes2 的 值 为 200 











图 14-36 全 局 变量 和 局 部 变量 使 用 实例 


1 <t== edu 14 和 10.html 一 -> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 全 局 变量 和 局 部 变量 使 用 实例 </title> 

7 </head> 

8 <body> 

9 <h4> 全 局 变量 和 局 部 变量 使 用 </h4> 
10 <script type="text/javascript"> 
11 var test1l =100, test2 =100; // 定 义 全 局 变量 
4 function checkScope( ) 
13 { 
14 var test1 =200; // 定 义 局 部 变量 
15 test2 =200; // 给 全 局 变量 再 次 赋值 
16 document .write ("局 部 变量 test1 的 值 为 "+test1); 
Ey document .write ("<br/>"); 
18 } 
19 checkScope( ); 
20 document .write ("全 局 变量 test1 的 值 为 "+test1); 
人 上 document .write ("<br/>"); 
22 document .write (" 全 局 变量 test2 的 值 为 "+test2) ; 
23 </script> 
24 </body> 
25 </html> 
代码 解释 


代码 中 第 11 行 声 明 两 个 全 局 变量 testl 和 test2， 初 值 均 为 100; 第 14 行 用 var 声明 了 
一 个 同名 的 局 部 变量 test1, 初 值 为 200; 第 15 行 的 全 局 变量 test2 赋值 为 200( 但 没有 用 var 
声明 )。 由 于 局 部 变量 和 全 局 变量 重 名 ， 根 据 规则 ， 局 部 变量 优先 级 更 高 ， 因 此 第 16 行 输 
出 显示 结果 是 200; 第 20 行 的 testl 是 100; 第 22 行 的 test2 也 是 全 局 变量 , 但 是 其 值 在 第 
15 行 被 修改 为 200， 结 果 显 示 为 200。 


14.7 综合 实例 


编程 实现 “手机 批发 业务 -产品 选 购 ”页 面 ， 主 要 功能 有 查看 购物 车 、 收 银 台 结算 、 初 | 第 
台 化 参数 等 。 代 码 如 下 所 示 ， 效 果 如 图 14-37 所 示 。 其 中 ， 第 一 行 的 三 件 产品 已 经 被 选 购 。 | 14 
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图 14-37 手机 批发 业务 选 购 产 品 页 面 (已 勾 选 3 件 ) 


根据 如 图 14-37 所 示 的 页 面 效果 ， 采 用 表单 嵌 套 表格 来 进行 页 面 布 局 。 表 格 为 3 行 3 
列 ， 主 要 用 于 显示 手机 外 形 、 参 数 和 价格 。 

三 个 按钮 的 功能 分 别 如 下 :“ 查 看 购物 车 ”按钮 的 功能 是 当 用 户 勾 选 相 关 产 品 后 ， 能 
够 显示 用 户 所 有 选 购 信息 ， 未 勾 选任 何 产品 ， 提 示 告 警 信息 ， 如 图 14-38 所 示 。 对 应 函数 
为 shoppingCart0， 见 代码 中 第 39 一 49 行 。“ 收 银 台 结算 ”按钮 功能 是 当 用 户 查看 完 购物 车 
后 ， 可 以 统计 所 选 产品 的 件数 和 金额 ， 通 知 支付 ， 如 图 14-39 所 示 。checkOutO0， 见 代码 中 
第 28 一 38 行 。“ 初 始 化 参数 ”按钮 功能 是 将 所 有 复 选 框 变 为 未 选中 状态 及 数组 清 零 。 对 应 
函数 为 clearAll10， 见 代码 中 第 18 一 27 行 。checkSelecttnumben) 函 数 功能 是 检查 页 面 上 每 个 
复 选 框 的 状态 。 除 此 之 外 ， 代 码 中 第 15 一 17 行 定义 三 个 数组 变量 ， 分 别 用 于 商品 价格 、 保 
存 产 品名 称 和 商品 选择 状态 。 


此 网 页 显示 : 














1-iphone 6 32GB 全 色 称 动听 电信 4G 价值 =2576 此 网 页 显示 : 
Pp 
Ge phe rp 3898 9 
Lm | Lm | 
图 14-38 选择 “查看 购物 车 ”对 话 框图 图 14-39 选择 “收银 台 结 算 ” 对 话 框图 


1 <!-= edu 14 7 1.html = 一 > 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 


<meta charset="UTF-8"> 


<title> 手 机 批发 业务 -商品 备 选区 </title> 
<style type="text/css"> 


table {width: 580px; 


height: 200px;} 


td { text-align: center; vertical-align: middle;} 


.myBtn {margin: 
border: 


</style> 


20px; width: 
lpx ridge #44FFEE;} 


<script type="text/javascript"> 


Var result = ""; 


// 存 放 选 购 信息 


120px; height: 45px; 


var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 


699.00); 


Var product = 
"OPPO R11 全 网 通 黑色 版 "， 
联通 电信 4G 手 机 "， 


小 米 红 米 手机 4A 全 网 通 版 2GB 内 存 16GB 玫瑰 金 "， 


new Array ("iPhone 6 32GB 金色 移动 联通 电信 4G"， 
"Apple iPhone 6s Plus 32GB 金色 移动 
"小 米 红 米 手机 4X 全 网 通 版 2GB 内 存 16GB 香槟 金 "，" 


版 2GB 内 存 16GB 樱花 粉 ") ; 


var isSelected = 


function clearAll() { 
[0，0，0，0，0，0]; // 选 择 状态 全 部 置 0 


isSelected = 

// 所 有 复 选 框 状态 变 为 未 选中 状态 
myForm.sp0.checked = false; 
myForm.spl.checked = false; 
myForm.sp2.checked = false; 
myForm.sp3.checked = false; 
myForm.sp4.checked = false; 
myForm.sp5.checked = false; 


} 


function checkout () { 
var total = 0;// 存 放 小 计 金 额 
var count = 0;// 存 放 选 购 产 品 件数 


for (var i 


} 


for(var i = 


total 


} 


new Array(0, 0, 0, 0, 0, 0); 


0; i < isSelected.length; i++) { 
count += isSelected[i]; 


0; i < price.length; 
total + price[i] * isSelected[i]// 累 计 金 额 


i++) { 


"小 米 红 米 4X 全 网 通 


alert ("您 所 选 购 的 "+ count +“" 件 ,产品 总 价 =" + total+"\n"+" 
请 去 支付 ! "); 


} 


function shoppingCart() { 
// 判 断 有 多 少 个 复 选 框 被 选中 
var selectList = ""; 
for(var j 
if(isSelected[j]) 
selectList += (j + 1) + "-" + product[j] + ", 价 值 =" + 
price[j] + "\n™; 


} 
} 


// 保 存 所 选 


产品 清 


0; j < product.length; a { 
{// 分 行 显示 


var info = (selectList == "") 2? "您 的 购物 车 为 室 ， 请 选 购 ! " : 
selectList; 


alert (info) ;// 生 成 一 个 结算 清单 ， 显 示 输 出 


} 


function checkSelect (number) { 


var temp; // 暂 存 复 选 框 状 态 
switch (number) { 
case 0: 
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54 temp = myForm.sp0.checked;break; 

55 case 1: 

56 temp = myForm.spl.checked; break; 

5 case 2: 

58 temp = myForm.sp2.checked; break; 

59 case 3: 

60 temp = myForm.sp3.checked; break; 

61 case 4: 

62 temp = myForm.sp4.checked; break; 

63 default: 

64 temp = myForm.sp5.checked; break; 

65 } 

66 isSelected[number] = (temp) ? 1 : 0; // 记 录 下 选中 产品 ，1- 选 中 ， 
0- 未 选 

67 } 

68 </script> 


69 </head> 
70 <body> 


71 <form name="myForm" method="post" action=""> 

72 <table align="center" border="1"> 

73 <caption> 手 机 批发 业务 -商品 备 选区 </caption> 

74 <tr> 

用 <td><img src="mobile 1.jpg" /><br /> 

76 <h4 name="h41">iPhone 6 32GB 金色 移动 联通 电信 4G</h4> 


<input type="checkbox" name="sp0" value="2576" 
onclick="checkSelect (0);">¥ 2576.00<br /></td> 









I moblie 2.jpg" /><br /> 

78 <h4 name="h421">OPPO R11 全 网 通 黑色 版 </h4> 

79 <input type="checkbox" name="spl" value="2999" 
onclick="checkSelect (1);">¥ 2999.00<br /></td> 

80 <td><img src="moblie 3.jpg" /><br /> 

81 <h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移动 
联通 电信 4G 手 机 </h4> 

82 <input type="checkbox" name="sp2" onclick= 
"checkSelect (2);"> ¥ 3898.00<br /></td> 

83 </tr> 

84 <tr> 

85 <td><img src="moblie 4.jpg" /><br /> 

86 <h4 name="h44"> 小 米 红 米 手机 4X 全 网 通 版 2GB 内 存 16GB 香槟 
金 </h4> <input type="checkbox" name="sp3" value="699" 
onclick="checkSelect (3);"> ¥ 699.00 

87 <br /></td> 

88 <td><img src="moblie 5.jpg" /><br /> 

89 <h4 name="h45"> 小 米 红 米 手机 4A 全 网 通 版 2GB 内 存 16GB 
玫瑰 金 </h4> 

90 <input type="checkbox" name="sp4" value="599" onclick 
="checkSelect (4);">¥ 599.00<br /></td> 

91 <td><img src="moblie 6.jpg" /><br /> 

92 <h4 name="h46"> 小 米 红 米 4X 全 网 通 版 2GB 内 存 16GB 机 花粉 </h4> 

93 <input type="checkbox" name="sp5" value="699" onclick= 
"checkSelect (5) ;">¥ 699.00<br /></td> 

94 [和 

SS 4 

96 <td colspan="3"> 

97 <input class="myBtn" type="button" value=" 查 看 购物 


车 " onclick="shoppingCart();"> 
98 <input class="myBtn" type="button" value=" 收 银 台 结 


算 " onclick="checkOut ();"> 


99 <input class="myBtn" type="button" value=" 初 始 化 参 
数 " onclick="clearAll();"> 
100 </td> 
101 /tr> 
102 </table> 
103 </form> 
104 </body> 


105 </html> 


JavaScript 是 一 种 功能 强大 


本 章 小 结 


、 使 用 简便 、 具 有 安全 性 的 客户 端 脚本 语言 。 本 章 简要 地 介 


绍 了 JavaScript 语言 的 历史 和 特点 ， 详 细 讲解 了 JavaScript 的 标识 符 、 变 量 、 运 算 符 和 表达 
式 、 三 种 程序 控制 结构 〈 包 括 顺序 结构 、 分 支 结构 和 循环 结构 ) 及 函数 等 相关 知识 。 通 过 
在 HIML 文档 中 嵌入 JavaScript 脚本 语言 ， 可 以 增强 用 户 与 网 页 之 间 的 交互 性 ， 并 在 页 面 
中 实现 各 种 特效 ， 提 高 页 面 的 观赏 性 。 


练习 14 
1 选择 是 


练习 与 实验 


(1) 在 客户 端 网 页 脚本 语言 中 最 为 通用 的 是 〈 站 


A. JavaScript B. 


VB C. Perl D. ASP 


(2) 下 列 不 是 JavaScript 的 特点 的 是 六 


A. 跨 平台 性 B. 动态 性 C. 编译 型 语言 D. 解释 型 语言 
(3) 下 列 不 属于 JavaScript 的 关键 字 的 是 〈 Xe 

A. for B. interface C. switch D. new 
(4) 下 列 属于 JavaScript 常量 的 是 Ws 

A. NaN B. undfined C. Math.PI D. Infinty 
(5) JavaScript 中 表示 声明 变量 的 关键 字 是 〈 Ye 

A. 下 B. while C. Var D. loop 
(6) 下 列 定义 函数 display0 语 法 正确 的 是 bs 

A. function display( ){} B. function: display( ){} 

C. function=display( ){} D. display( ){} 


(7) 引用 外 部 showjs 文件 方法 正确 的 选项 是 ( N's 


A. <script src="show" 


c= 


></script> B. <script name="show.js" ></script> 


C. <script hre 伟 "show.js" ></script> D. <script src="show.js" ></script> 


2. 填空 题 
(1) 在 HTML 中 嵌入 JavaScript 代码 时 ， 需 使 用 标记 。 
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(2) JavaScript 中 的 消息 对 话 框 分 为 和 三 种 。 

(3) 表达 式 18/0 的 值 为 

(4) 逻辑 表达 式 (5<100) &&(3>0) 的 结果 为 8 

(5) 位 表达 式 5 & 7、5 |7 和 5 人 ^7 的 结果 分 别 为 i 和 & 
3. 简 答题 


(1) continue 与 break 语句 在 循环 中 的 作用 有 什么 不 同 ? 
(2) do…while(0) 与 while 循环 有 什么 不 同 ? 
(3) 自 定义 函数 时 应 注意 哪些 事项 ? 


实验 14 
. 编写 yt 程序 实现 “ 九 九 乘法 口诀 ” 表 ， 如 图 14-40 所 示 。 


1°*2=2 2*2=4 


1*3=3 2*3=6 3*3=9 

1*4=4 2*4=8 3*4=12 4*4=16 

1*5=5 2*5=10 3*5=15 4*5=20 $5*5=25 

1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 

1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 

1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 

1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81 





图 14-40 九 九 乘法 表 效 果 图 


2. 编写 JavaScript 代码 ， 找 出 符合 条 件 的 数 。 如 图 14-41 所 示 。 

(1) 页 面 标题 为 :“ 找 出 符合 条 件 的 数 ”: 

(2) 页 面 内 容 : 3 号 标题 标记 显示 “ 找 出 1000 一 9999 之 间 能 够 被 17 和 13 同时 整除 的 
整数 的 个 数 及 累加 和 ”要 求 输出 区 间 累 计 有 多 少 个 符合 条 件 的 整数 , 并 计算 符合 条 件 的 整 
数 的 累加 和 ， 同 时 输出 符合 条 件 的 整数 ， 输 出 格式 : 每 行 10 个 整数 。 


二 EEC 一 
找 出 1000-9999 之 间 能 够 被 17 和 13 同 时 整除 的 整数 的 个 数 及 累加 和 


区 间 中 符合 条 件 的 数 有 (输出 格式 ，10 个 1 行 

1105 1326 1547 1768 1989 2210 2431 2652 2873 3094 
3315 3536 3757 3978 4199 4420 4641 4862 5083 5304 
5525 5746 5967 6188 6409 6630 6851 7072 7293 7514 
7735 7956 8177 8398 8619 8840 9061 9282 9503 9724 


9945 
区 间 中 符合 条 件 的 数 共有 41 个 
区 间 中 符合 条 件 的 数 的 累加 和 为 226525 

















图 14-41 找 出 符合 条 件 的 数 
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本 章 学 习 目标 


通过 JavaScript 事件 知识 的 学 习 ， 能 够 了 解 网 页 中 基本 的 事件 类 型 ， 理 解 JavaScript 
事件 在 网 页 设计 中 的 作用 。 理 解 事件 及 事件 句柄 的 相关 概念 ; 掌握 JavaScript 中 常用 的 事 
件 句 柄 ;理解 事件 发 生 时 的 事件 处 理 过 程 。 

Web 前 端 开 发 工程 师 应 掌握 以 下 内 容 : 

。 了 解 JavaScript 事件 类 型 。 

。 理解 事件 的 概念 。 

。 理解 事件 句柄 与 事件 处 理 代 码 相 关联 的 方式 。 
学 会 利用 表单 的 提交 及 重 置 事件 对 表单 的 数据 进行 校 验 。 
理解 筷 标 事件 中 的 鼠标 单 、 双 击 及 鼠标 移动 事件 。 
掌握 常用 的 键盘 及 窗口 事件 。 


15.1 JavaScript 事件 概述 


事件 是 一 些 可 以 通过 脚本 响应 的 页 面 动作 。 当 用 户 按 下 鼠标 键 或 者 提交 一 个 表单 ， 甚 
至 在 页 面 上 移动 鼠标 时 ， 就 会 产生 相关 的 事件 。 绝 大 多 数 事件 的 命名 是 描述 性 的 ， 很 容易 
理解 ， 例 如 Click、Submit、MouseOver 等 ， 通 过 名 称 就 可 以 猜测 其 含义 。 


15.1.1 事件 类 型 


JavaScript 中 的 事件 大 多 数 与 HTML 标记 相关 ， 都 是 由 用 户 操作 页 面 元 素 时 触发 的 。 
根据 事件 触发 的 来 源 及 作用 对 象 的 不 同 ， 可 把 事件 分 为 鼠标 事件 、 键 盘 事件 、HTML 事件 
及 突变 事件 4 种 类 型 。 

1. 鼠标 事件 

鼠标 事件 主要 指 用 户 使 用 鼠标 操作 HTML 元 素 时 触发 的 事件 ,常见 的 鼠标 单 击 、 双 击 、 
文本 框 选择 、 单 选 按钮 、 复 选 框 选中 都 会 触发 鼠标 事件 。 当 鼠标 移动 、 盘 旋 、 移 出 网 页 上 
相关 区 域内 的 特定 元 素 时 触发 MouseMove、MouseOver 和 MoveOnut 事件 。 

2. 键盘 事件 

键盘 事件 主要 指 用 户 在 键盘 上 敲 击 、 输 入 时 触发 的 事件 。 如 用 户 在 键盘 上 按 下 某 一 键 
时 会 触发 KeyDown 事件 ， 用 户 释放 按 下 的 键 会 触发 KeyUp 事件 。 

3. HTML 事件 

HTML 事件 主要 指 当 窗口 发 生变 动 或 者 发 生 特定 的 客户 端 /服务 器 端 交互 时 触发 的 事 
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件 。 如 页 面 完 全 载 入 时 在 window 对 象 上 会 触发 Load 事件 ; 任何 元 素 或 者 窗口 本 身 失 去 焦 
点 时 触发 Blur 事件 。 

4. 突变 事件 

突变 事件 主要 指 文档 对 象 底 层 元 素 发 生 改变 时 触发 的 事件 。 如 当 文 档 或 者 元 素 的 子 树 
因为 添加 或 者 删除 节点 而 改变 时 会 触发 DomSubtreeModified (DOM 子 树 修改 ) 事件 ， 当 
一 个 节点 作为 另 一 个 节点 的 子 节点 插入 时 会 触发 DomNodeInserted (DOM 节点 插入 ) 事 件 。 


1S.1.2 事件 句 桥 


事件 句柄 〈 又 称 事件 处 理 函数 ) 是 指 事件 发 生 时 要 进行 的 操作 。 每 一 个 事件 均 对 应 一 
个 事件 句柄 ， 在 程序 执行 时 ， 将 相应 的 函数 或 语句 指定 给 事件 句柄 ， 则 在 该 事件 发 生 时 ， 
浏览 器 便 执 行 指定 的 函数 或 语句 ， 从 而 实现 网 页 内 容 与 用 户 操作 的 交互 。 当 浏览 器 检测 到 
某 事件 发 生 时 ， 便 查找 该 事件 对 应 的 事件 句柄 有 没有 被 赋值 ， 如 果 有 ， 则 执行 该 事件 句柄 。 
通常 ， 事 件 句柄 的 命名 原则 是 在 事件 名 称 前 加 上 前 绥 on。 如 鼠标 移动 MouseOver 事件 ， 其 
事件 句柄 为 onMouseOver。 事 件 句 柄 名 称 与 HTML 标记 的 事件 处 理 属性 相同 。 

1. 基本 语法 

< 标记 ”事件 句柄 ="JavaScript 代 码 ">… </ 标 记 > 

<input type="button" name="" value=" 显 示 " onclick="show();"> 

2. 语法 说 明 

事件 句柄 名 称 与 事件 属性 同名 ， 都 作为 HTML 标记 的 属性 ， 与 事件 名 称 略 有 不 同 ， 只 
是 在 事件 名 称 前 面 加 上 了 on。 例如 Click 事件 的 事件 句柄 为 onClick， 该 项 标记 对 应 的 事件 
属性 也 为 onClick; Blur 事件 的 事件 句柄 为 onBlur， 该 项 标记 对 应 的 事件 属性 也 为 onBlur， 
其 他 事件 的 事件 句柄 以 此 类 推 。 常 用 的 事件 和 事件 句柄 的 对 照 关系 如 表 15-1 所 示 。 


表 15-1 事件 类 型 、 事 件 、 事 件 句柄 一 览 表 


事 件 类 型 事 件 事件 句柄 事件 解释 



































KeyDown 当 键盘 被 按 下 时 执行 JS 代码 

键盘 事件 KeyPress 当 键盘 被 按 下 后 又 松 开 时 执行 JS 代码 
KeyUp 当 键 盘 被 松 开 时 执行 JS 代码 
Click onClick 当 鼠 标 被 单 击 时 执行 JS 代码 
Dblclick onDblclick 当 鼠 标 被 双击 时 执行 JS 代码 
MouseDown onMouseDown 当 鼠 标 按钮 被 按 下 时 执行 JS 代码 

鼠标 事件 MouseMove onMouseMove 当 鼠 标 指针 移动 时 执行 JS 代码 
MouseOnut onMouseOnut 当 鼠 标 指针 移出 某 元 素 时 执行 JS 代码 
MouseOver onMouseOver 当 鼠 标 指针 悬 停 于 某 元 素 之 上 时 执行 JS 代码 
MouseUp onMouseUp 当 鼠 标 按钮 被 松 开 时 执行 JS 代码 
Change onChange 当 元 素 改 变 时 执行 JS 代码 
Submit onSubmit 当 表 单 被 提交 时 执行 JS 代码 

表单 控件 Reset onReset 当 表单 被 重 置 时 执行 JS 代码 

事件 Select onSelect 当 元 素 被 选取 时 执行 JS 代码 
Blur onBlur 当 元 素 失 去 焦点 时 执行 JS 代码 





Focus 当 元 素 获得 焦点 时 执行 JS 代码 


续 表 






事件 类 型 事件 句柄 事件 解释 
窗 日 囊 | Load onLoad 当 文 档 载 入 时 执行 JS 代码 
onUnload 当 文 档 卸 载 时 执行 JS 代码 














15.1.3 事件 处 理 


只 要 给 特定 的 事件 句柄 绑 定 事件 处 理 代码 就 可 以 响应 事件 .事件 处 理 指定 方式 有 3 种 : 
在 HIML 标记 中 的 静态 指定 、 在 JavaScript 中 的 动态 指定 及 特定 对 象 的 特定 事件 的 指定 。 

1. 静态 指定 

1) 基本 语法 


< 标记 事件 句柄 1=" 事 件 处 理 程序 1" [事件 句柄 2= "事件 处 理 程序 2" . . . 事件 句柄 n=" 事 件 处 
理 程 序 n"] >…</ 标 记 > 





2) 语法 说 明 
静态 指定 方式 ， 是 在 开始 标记 中 设置 相关 事件 句柄 ， 并 绑 定 事件 处 理 程序 即 可 。 
标记 可 以 设置 一 个 或 多 个 事件 句柄 ， 并 绑 定 事件 处 理 程序 。 事 件 程序 可 以 是 JavaScript 代 

码 串 或 函数 ， 通 常 将 事件 处 理 程序 定义 成 函数 。 

例如 ， 给 p 标记 和 body 标记 添加 事件 句柄 属性 ， 并 绑 定 事件 。 格 式 如 下 : 

<p onClick="show();" onDblClick="display();"></p> 

<body onLoad="alert (' 页面 装载 成 功 ! ');" onUnload="pageLoad();"></body> 

【 例 15-1-1】 在 HTML 标记 中 的 静态 指定 事件 处 理 代码 。 代 码 如 下 所 示 ， I 
图 15-1 和 图 15-2 所 示 。 


1 <!-- edu 15 1 1.html --> 
2 <!doctype html> 





3 <html lang="en"> 视频 讲解 
4 <head> 
每 <meta charset="UTF-8"> 
6 <title>HTML 属 性 的 事件 处 理 器 的 应 用 </title> 
第 <script type="text/javascript"> 
8 function testInfo (message) {alert (message);} 
9 </script> 
10 </head> 
11 <body> 
3 <h4>HTML 属 性 的 事件 处 理 器 的 应 用 </h4> 
13 <form method="post" action=""> 
14 <input type="button" value=" 通 过 JS 语 句 输出 信息 " onclick="alert 
(' 使 用 alert () 输出 信息 ') "> 
2 <input type="button" value=" 通 过 函数 输出 信息 " onclick="testInfo 
( "调用 testInfo () 函数 输出 信息 ' ) "> 
16 </form> 
17 </body> 
18 </html> 
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图 15-1 调用 JS 语句 输出 信息 图 15-2 调用 函数 输出 信息 














3) 代码 解释 

代码 中 第 14 行 、 第 15 行 定义 了 2 个 普通 按钮 ， 并 通过 HIML 的 input 标记 的 onClick 
事件 句柄 来 关联 事件 处 理 程序 。 如 果 单 击 “ 通 过 JS 语句 输出 信息 ”按钮 ， 将 触发 该 按钮 的 
Click 事件 ， 直 接 执行 JavaScript 代码 alert(' 使 用 alert0 输 出 信息 )， 弹 出 告警 消息 框 ， 显 示 
信息 ; 如 果 单 击 “ 通 过 函数 输出 信息 ”按钮 , 将 触发 该 按钮 的 Click 事件 , 调用 代码 中 第 7 一 
9 行 定义 的 名 为 testInfo(message) 函 数 ， 通 过 参数 传递 要 输出 的 信息 ， 函 数 的 执行 结果 是 弹 
出 告警 消息 框 ， 并 把 参数 传递 的 信息 显示 在 对 话 框 内 。 

2. 动态 指定 

大 多 数 情况 下 使 用 静态 指定 方式 来 处 理事 件 ， 但 有 时 也 需要 在 程序 运行 过 程 中 动态 指 
定 事件 ， 也 称 为 分 配 某 一 事件 ， 这 种 方式 允许 程序 像 操作 JavaScript 属性 一 样 来 处 理事 件 。 

1) 基本 语法 

< 事件 源 对 象 > .< 事件 句柄 >=function () {< 事件 处 理 程序 >; } 

Object.onclick=function() {disp();} 

// 动 态 给 对 象 指派 事件 ， 绑 定 事件 处 理 函 数 

Object.onclick(); // 调 用 方法 

2) 语法 说 明 

在 此 用 法 中 ,“ 事 件 处 理 程序 ”必须 使 用 不 带 函数 名 的 function0 联 来 定义 ， 也 就 是 无 
函数 名 的 函数 ， 函 数 体内 可 以 是 字符 串 形式 的 代码 ， 也 可 以 是 函数 。 

【 例 15-1-2】 在 JavaScript 中 进行 动态 指定 事件 处 理 程序 。 代 码 如 下 所 示 ， 页 面 效 果 如 
图 15-3 所 示 。 


和 <1= 所 QU 主 5 1 2ahtml ==> 
2 <!doctype html> 
3 <html lang="en"> 


<head> 视频 讲解 





4 

5 <meta charset="UTF-8"> 

6 <title> JavaScript 中 的 动态 指定 </title> 

昌 <style type="text/css"> 

8 #inp{width:100px;height:40px;color:red;} 
9 </style> 

10 <script type="text/javascript"> 

二 二 function clickHandler () 

a 时 

13 alert ("代码 触发 事件 ， 即 将 提交 表单 ! ") ; 
14 return true; 

15 } 


16 </script> 


证 学 </head> 


18 <body> 

19 <form name="myform" method="post" action="" > 

20 <input id="inp" type="button" name="mybutton"” value=" 提 交 " > 

21 </form> 

22 <script type="text/javascript"> 

3 // 向 button 元 素 动态 分 配 onclick 事件 

24 document .getElementById('"'inp') .onclick=function() {return 
clickHandler ();} 

25 myform.mybutton -onclick(): // 程 序 触发 

26 </script> 

27 </body> 

28 </html> 

3) 代码 解释 


代码 中 第 11 一 15 行 定义 了 一 个 名 为 clickHandler0 的 函数 ; 第 19 一 21 行 定义 了 一 个 表 
单 ， 并 在 表单 中 插入 一 个 按钮 ， 第 22 一 26 行 插入 脚本 ， 其 中 第 24 行 通过 JavaScript 程序 
给 button 按钮 动态 分 配 onclock 事件 ， 当 代码 执行 时 ， 第 25 行 系统 自动 执行 了 动态 分 配 的 
onclick 事件 ， 采 用 名 称 调用 按钮 的 onclick 事件 时 必须 在 事件 属性 后 面 加 上 一 对 小 括号 ， 
例如 obj.onclick0， 和 否则 调用 无 效 ， 而 不 是 用 户 单 击 “ 提 交 ” 按 钮 的 结果 。 





S 上 F\Web 前 沪 开 力 -0x 
































图 15-3 JavaScript 动态 指定 处 理事 件 函 数 


3， 特定 对 象 特 定 事件 的 指定 

在 script 标记 中 编写 元 素 对 象 的 事件 处 理 程序 代码 。 使 用 script 标记 的 for 属性 指定 事 
件 源 ， 并 用 event 属性 指定 事件 句柄 名 称 ， 这 种 方法 用 得 比较 少 ， 但 是 在 某 些 场合 还 是 很 
好 用 的 。 

1) 基本 语法 

<script type="text/javascript" for=" 对 象 " event=" 事 件 句柄 "> 

// 事 件 处 理 程序 代码 

</script> 

2) 语法 说 明 

for 属性 指定 特定 对 象 ， 如 window、document 等 ; event 属性 指定 事件 句柄 名 称 ， 如 
onload、onunload 等 。 在 脚本 script 标记 中 插入 相关 事件 处 理 函 数 代码 。 
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【 例 15-1-3】 特定 对 象 的 特定 事件 处 理 程序 的 应 用 ， 代 码 如 下 所 示 ， 页 面 效 果 如 图 15-4 


所 示 。 且 注 总 间 
四 
1 <!-- edu 15 1 3.html --> [es 
GE [be 


2 <!doctype html> 


3 <html lang="en"> 视频 讲解 
4 <head> 

La <meta charset="UTF-8"> 

6 <title> 给 特定 对 象 指定 特定 事件 处 理 程序 </title> 

7 </head> 

8 <body> 

9 <h4> 给 特定 对 象 指定 特定 事件 处 理 程序 </h4> 

10 <script type="text/javascript" for="window" event="onload"> 
EF alert ("网 页 读 取 完 成 ， 欢 迎 光临 ! ") ; 

2 </script> 

13 </body> 

14 </html> 

3) 代码 解释 


代码 中 第 10 一 12 行 利用 script 标记 的 for、event 属性 分 别 指定 对 象 和 事件 句柄 ， 并 在 
脚本 中 定义 了 JavaScript 代码 alert(" 网 页 读 取 完 成 ， 欢 迎 光临 ! )。 当 网 页 加 载 时 ， 通 过 告 
警 消息 框 输出 “网 页 读 取 完成 ， 欢 迎 光临 1”。 

”和 本 本 [ELz 


人 | Fwebrist B Pp ~ ox | 合十 二 NG 十 x rE 


给 特定 对 象 指定 特定 事件 处 理 程序 | 亲自 网 页 的 消息 









































图 15-4 特定 对 象 的 特定 事件 处 理 程序 


1S.1.4 事件 处 理 程 序 的 返回 值 


在 JavaScript 中 通常 事件 处 理 程序 不 需要 有 返回 值 ， 这 时 浏览 器 会 按 默 认 方式 进行 处 
理 。 很 多 情况 下 需要 使 用 返回 值 ， 来 判断 事件 处 理 程序 是 否 正 确 进行 处 理 ， 或 者 通过 这 个 
返回 值 来 判断 是 否 进行 下 一 步 操 作 。 

在 这 种 情况 下 ， 事 件 处 理 程序 返回 值 都 为 布尔 型 值 ， 如 果 为 false， 则 阻止 浏览 器 的 下 
一 步 操作 ;， 如 果 为 tue， 则 进行 默认 的 操作 。 

1. 基本 语法 

< 标记 事件 句柄 ="return 函数 名 (参数 ) ;"” >…</ 标 记 > 

2. 语法 说 明 

事件 处 理 代码 中 函数 必须 具有 布尔 型 的 返回 值 ， 即 函数 体 中 最 后 一 句 必须 是 带 返 回 值 
的 retum 语句 。 




















【 例 1S-1-4】 事 件 处 理 程序 返回 值 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 15-5 


1 <!-- edu 15 1 4.html --> 
2 doctype html> 





3 <html lang="en"> ph 
4 <head> 和 
每 <meta charset="UTF-8"> 视频 讲解 
6 <title> 事 件 处 理 程序 返回 值 的 应 用 </title> 
7 <script language="javascript"> 
8 function showName(){ 
9 if(document .forml .namel .value=="") 
10 { alert ("没有 输入 内 容 ! "); return false; } 
11 else { 
4 alert (" 欢 迎 你 !"+document . forml .namel .value) ;return 
true; 
13 } 
14 } 
15 </script> 


16 </head> 
17 <body> 


18 <h4> 事 件 处 理 程序 返回 值 的 应 用 </h4> 

19 <!-- onsubmit 事 件 处 理 函数 返回 真 值 就 执行 action 指 定 的 网 页 --> 

20 <form name="forml" action="simple.html" onsubmit="return 
ShowName ();"> 

2 姓名 : <input type="text" name="namel" /> 

22 <input type="submit" value=" 提 交 "/> 

23 </form> 

24 </body> 

25 </html> 

3， 代码 解释 


代码 中 第 8 一 14 行 定义 一 个 JavaScript 函数 showName0; 如 果 表 单 中 姓名 文本 输入 框 
中 没有 内 容 , 则 提示 “没有 输入 内 容 !”，, 返回 false 值 ; 如 果 姓 名 文本 框 中 输入 姓名 , 如 “ 储 
久 良 ” 则 提示 “欢迎 你 ! 储 久 良 ” 单 击 “确定 ”按钮 后 ， 返 回 true 值 。 第 20 一 23 行 定 
义 一 个 表单 ,并 在 表单 中 插入 一 个 文本 输入 框 和 一 个 提交 按钮 , 其 中 第 20 行 定义 了 表单 的 
pe 并 指定 事件 发 生 时 调用 执行 代码 “retum showName();”。 

， 并 在 姓名 文本 框 处 输入 姓名 ， 单 击 “ 提 交 ” 按 钮 ， 触 发 Submit 事件 ， 调 用 

ne de showName();”， 返 回 值 为 tue， 则 浏览 器 进行 下 一 步 操作 ， 访 问 网 页 
simple.html， 如 图 15-6 所 示 ; 如 果 在 文本 输入 框 中 不 输入 任何 内 容 就 单 击 “ 提 交 ” 按 钮 则 
返回 false 值 ， 浏 览 器 阻止 进行 下 一 步 操作 ， 返 回答 入 界面 。 
[= 王 E3 
【¢ 遂 )[ 司 FWwebi 环 昨 D- ox [me x 
事件 处 理 程序 返回 值 的 应 用 
姓名 ，WZXR 国 到 el 
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图 15-5 事件 处 理 程序 的 返回 值 应 用 图 15-6 返回 值 为 真 时 的 网 页 
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1S.2 表单 事件 


表单 是 Web 应 用 中 和 用 户 进行 交互 的 最 常用 的 工具 。 用 户 注 册 、 发表 讨 论 和 评论 等 都 
需要 用 到 表单 。 用 户 在 表单 中 填写 数据 ， 然 后 将 数据 发 送 到 服务 器 端 。JavaScript 脚本 所 要 
做 的 主要 工作 就 是 表单 验证 ， 如 验证 用 户 是 否 有 未 填 信息 ， 输 入 的 数据 格式 是 否 正确 等 。 
这 样 ， 在 数据 被 提交 到 服务 器 之 前 数据 的 正确 性 和 合法 性 就 得 到 了 验证 并 反馈 给 了 用 户 ， 
用 户 可 以 根据 提示 修改 错误 。 

表单 控件 (元 素 ) 有 很 多 ， 如 文本 输入 框 、 下 拉 列 表 框 、 复 选 框 、 单 选 按钮 、 提 交 按 
钮 等 。 在 对 表单 控件 (元素) 进行 操作 时 ， 都 会 触发 相应 的 事件 。 


1S.2.1 获得 焦点 与 失去 焦点 事件 


当 表 单 控件 获得 焦点 时 会 触发 focus 获得 焦点 事件 , 当 表 单 控件 失去 焦点 时 会 触发 blur 
事件 。 当 单 击 表单 中 的 按钮 时 ， 该 按钮 就 获得 了 焦点 ; 当 单 击 表单 中 的 其 他 区 域 时 ， 该 按 
钮 就 失去 了 焦点 。 

【 例 1S-2-1】 表 单 控件 焦点 事件 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 15-7 所 示 。 

1 <!-- edu 15 2 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 









































长 




















4 <head> 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 获 得 /失去 焦点 测试 </title> 
J <script type="text/javascript"> 
8 function getFocus () {document .bgColor ="#114455";} 
9 function loseFocus() {document .bgColor ="#FF66FF";} 
10 </script> 


1 </head> 
12 <body> 


13 <form> 

14 <br/><input type="button" onfocus="getFocus () " value=" 获 得 / 
失去 焦点 触发 事件 " onblur="1loseFocus () "/> 

15 </form> 

16 </body> 

17 </html> 




















图 15-7 普通 按钮 获得 /失去 焦点 效果 图 


代码 解释 
代码 中 第 14 行 定义 了 “获得 /失去 焦点 触发 事件 ”的 普通 按钮 ， 并 为 此 按钮 设置 了 


loseFocus() 函 数 将 文档 背景 颜色 设置 为 二 F66FF。 
15.2.2 提交 及 重 置 事件 


EE 


在 表单 中 单 击 “ 提 交 ” 按 钮 后 , 会 触发 Submit 事件 , 将 表单 中 的 数据 提交 到 服务 器 端 ; 


和 击 “ 重 置 ”按钮 后 ， 会 触发 Reset 事件 ， 将 表单 中 的 数据 重 置 为 初始 值 。 在 表单 中 ， 





插入 1 个 type 属性 值 为 submit 的 input 标记 来 添加 1 个 提交 按钮 ， 当 单 击 该 按钮 时 会 触发 





表 


的 Submit 事件 ， 同 样 可 以 插入 1 个 type 属性 值 为 reset 的 input 标记 来 添加 1 个 重 置 


按钮 ， 当 单 击 该 按钮 时 会 触发 表单 的 Reset 事件 。 如 果 需 要 表单 Submit 事件 及 Reset 事件 
触发 时 完成 特定 的 功能 ， 例 如 需要 对 表单 数据 进行 合法 性 验证 ， 则 需要 为 表单 设置 事件 句 


柄 ， 


【 例 1S-2-2】 表 单 提交 、 重 署 事件 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 15-8 所 示 。 
1 <!-- edu 15 2 2.html --> 


2 <!doctype html> 
3 <html lang="en"> 





4 <head> ee 
<meta charset="UTF-8"> 视频 讲解 
6 <title> 表 单 提交 、 重 置 事件 的 应 用 </title> 
7 <style type="text/css"> 
8 fieldset {width:300px;height:150px;} 
9 </style> 

10 <script language="javascript" type="text/javascript"> 

1 function $ (id){return document .getElementById(id);} 

12 function submitTest(){ 

Fe var msg =" 用 户 名 :"+$ ("input1") .value; 

14 msg+="\n 密 公 : 是 "+$ ("input2") .value; 

和 alert (msg); 

16 return false; 

2 } 

18 function resetTest() {alert ("将 数据 清空 ") ; } 

3 人 </script> 


20 </head> 
21 <body> 


4 <form onSubmit="return submitTest();" onReset="resetTest()"> 

23 <fieldset> 

24 <legend> 表 单数 据 提交 </legend> 

25 <br><label> 用 户 名 : </label><input type="text" id="input1"> 

26 <br><label> 密 gnbsp; 码 : </label><input type="password" 

id="input2"> 

27 <br><input type="submit" value=" 提 交 "> 

28 <input type="reset" value=" 重 置 "> 

29 </fieldset> 

30 </form> 

半生 </body> 第 

32 </html> 
15 
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表单 数据 提交 


用 户 名 ， 丙 双 民 
密码 ，weeeeeee 


[到 























图 15-8 单 击 “ 提 交 ” 按 钮 时 的 提示 信息 


代码 解释 

代码 中 第 10 一 19 行 定义 了 三 个 JavaScript 函数 ,分 别 是 $(id)、submitTest( 和 和 resetTest(); 
第 22 行为 表单 设置 了 onSubmit 和 onReset 事件 句柄 。 
当 单 击 “ 提 交 ” 按 钮 将 表单 数据 提交 时 ， 触 发 Submit 事件 ， 调 用 执行 代码 “returm 
submitTest();”， 这 段 代 码 将 调用 submitTest0)， 获 取 输 入 框 中 的 用 户 名 和 密码 ， 弹 出 告警 消 
息 框 并 返回 false; 当 单 击 “ 重 置 ”按钮 将 表单 数据 重 置 时 ， 触 发 Reset 事件 ， 调 用 执行 代 
人 码 “resetTest()”， 这 段 代码 调用 执行 后 会 弹出 “数据 清空 ”的 告警 消息 框 。 


15.2.3 改变 及 选择 事件 


在 表单 中 , 当选 择 了 文本 输入 框 或 多 行文 本 输入 框 内 的 文字 时 会 触发 Select 选择 事件 。 
部 分 示例 代码 如 下 所 示 : 

<form> 

<input type="text" name="" value=" 文 本 被 选择 后 触发 事件 " onSelect= 

"Javascript:alert (' 内 容 已 被 选中 !')"> 

</form> 

代码 中 第 2 行 定义 了 一 个 文本 输入 框 ， 并 设置 onSelect 属性 值 为 JavaScript 代码 ， 当 
文本 框 的 内 容 被 选中 后 , 将 触发 Select 事件 , 调用 代码 , 通过 告警 消息 框 弹出 一 个 显示 “内 
容 已 被 选中 !” 的 对 话 框 ， 当 一 个 文本 输入 框 或 多 行文 本 输入 框 失去 焦点 并 更 改 值 时 或 当 
select 下 拉 选 项 中 的 一 个 选项 状态 改变 后 会 触发 Change 改变 事件 。 

【 例 1S-2-3】 下 拉 列 表 框 实现 图 像 切 换 。 代 码 如 下 所 示 ， 页 面 效果 如 图 15-9 所 示 。 


1 <1== edua 15 2 3.html =-> 国 


2 <!doctype html> 
3 <html lang="en"> 














4 <head> » 上 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 下 拉 菜 单 </title> 
7 <script language="javascript"> 
8 function $ (id) {return document .getElementById (id) ; }// 获 取 元 素 
9 function changeImage (){ 
10 var index =$ ("game") .selectedIndex;// 获 取 下 拉 框 中 选择 项 
生 $ ("show") .src=$ ("game") .options[index] .value;// 更 改 图 片 
ke } 
3 </script> 


14 </head> 


汪汪 <body> 


16 <div align="center"> 

17 <form > 

18 <select id="game" onChange="changeImage () "” > 
19 <option value="pic4.jpg">-- 请 选择 --</option> 
20 <option value="pic0.jpg"> 平 板 电视 </option> 
aE <option value="picl.jpg"> 笔 记 本 电脑 </option> 
22 <option value="pic2.jpg"> 单 反 相机 </option> 
23 <option value="pic3.jpg"> 智 能 手机 </option> 
24 </select> 

25 </form> 

26 </div> 

21 <p align="center"> 

28 <img src="pic4.jpg" id="show"> 

29 </p> 

30 </body> 

31 </html> 
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图 15-9 下 拉 列 表 框 选择 “单反 相机 ”选项 


代码 解释 

代码 中 第 8 一 12 行 定义 了 两 个 JavaScript 函数 ， 分 别 为 $(id)、changeImage(); 第 18 行 
为 下 拉 列 表 框 设置 了 onChange 事件 句柄 ; 第 28 行 在 页 面 中 插入 了 一 张 图 像 。 当 下 拉 列 表 
框 中 的 选项 改变 时 会 触发 change 事件 ， 调 用 changeImage0 将 原来 的 图 像 更 改 为 选中 的 
图 像 。 

changeImage() 中 第 10 行 用 于 获得 下 拉 列 表 框 中 选中 的 列表 项 的 索引 ; 第 11 行 用 于 将 
指定 索引 处 的 下 拉 列 表 框 选项 的 值 赋 给 img 元 素 的 src 属性 来 完成 图 片 的 更 换 。 


15.3 鼠标 事件 


在 网 页 设计 中 ， 如 果 用 鼠标 对 网 页 中 控件 进行 操作 时 会 触发 鼠标 事件 。 当 单 击 鼠 标 左 
键 会 触发 Click 事件 ， 双 击 鼠 标 时 会 触发 DblClick 事件 ， 鼠 标 按 下 后 青松 开 时 会 触发 | 第 
MouseUp 事件 等 。 下 面 对 一 些 常 用 的 鼠标 事件 做 简单 介绍 。 15 
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15.3.1 鼠标 单 、 双 击 事件 


鼠标 事件 主要 指 用 鼠标 对 页 面 中 的 控件 进行 单 击 或 双击 操作 时 触发 的 事件 ， 它 们 也 是 
网 页 开发 中 运用 最 多 的 事件 。 当 单 击 页 面 中 的 按钮 时 可 以 触发 鼠标 单 击 事件 ， 例 如 : 

<input type="button"” name="click" value=" 鼠 标 单 击 " onClick="alert(' 你 单 击 了 

我 1')"> 

当 双 击 页 面 中 的 按钮 时 可 以 触发 鼠标 双击 事件 ， 例 如 : 


<input type="button" name="click" value=" 鼠 标 双 击 "” onDblClick="alert(' 你 双 
击 于 我 :如 jw> 


【 例 1$-3-1】 文 本 输入 框 内 容 复制 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 15-10 所 示 。 
1 <!-- edu 15 3 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 








4 <head> 视频 讲解 

5 <meta charset="UTF-8"> 

6 <title> 鼠 标 单 击 事件 </title> 

7 <script type="text/javascript"> 

8 function $(id){return document .getElementById(id);} 

9 function copyText() {$ ("target") .value=$ ("source") .value;} 
10 </script> 


11 </head> 
12 <body> 


13 <h4> 文 本 框 内 容 复制 </h4> 

14 <form method="post" action=""> 

15 来 源 文本 框 : <input type="text" id="source" value=""><br> 

16 目标 文本 框 : <input type="text" id="target" readonly><br> 

Ey <input type="button" value=" 复 制 文本 框 内 容 " onClick= 
"copyText (); "> 

18 </form> 

19 </body> 

20 </html> 

代码 解释 


代码 中 第 8 行 、 第 9 行 定义 了 两 个 函数 ,分别 为 58(id)、copyText0; 第 15 行 、 第 16 行 
定义 了 两 个 文本 输入 框 ， 且 第 2 个 文本 框 设 置 只 读 属性 ; 第 17 行 定义 了 一 个 普通 按钮 ， 并 
为 该 按钮 设置 了 onCilck 事件 句柄 。 在 第 1 个 文本 输入 框 中 输 完 内 容 后 ， 单 击 “ 复 制 文本 





文本 框 内 容 复制 


来 源 文本 框 。 原样 看 入 








15.3.2 ” 饼 标 移动 事件 


鼠标 事件 除了 最 典型 的 Click 事件 之 外 ， 还 有 鼠标 进入 页 面 元 素 MouseOver 事件 、 退 
出 页 面 元 素 MouseOut 事件 和 鼠标 按键 检测 MouseDown 及 MouseUp 等 事件 。 下 面 的 例子 
实现 了 鼠标 移 向 页 面 中 的 某 个 图 像 时 触发 MouseOver 事件 ， 鼠 标 移 出 图 像 时 触发 了 
MouseOut 事件 。 

【 例 1S-3-2】 移 动 鼠标 替换 图 片 。 代 码 如 下 所 示 ， 页 面 效果 如 图 15-11 所 示 。 


1 <== ou 15 3 2:html 一 -> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> a 
5 <meta charset="UTF-8"> 、 
6 <title> 和 鼠标 移动 事件 </title> 视频 讲解 
汪 <script type="text/javascript"> 

8 function $ (id){return document .getElementById(id);} 

9 function mouseOver(){$('b1').src ="eg mousel.jpg";} 

10 function mouseOut (){$('b1') .src ="eg mouse2.jpg";} 

11 </script> 

12 <style type="text/css"> 

了， ph4{text-align:center;} 

14 </style> 


15 </head> 
16 <body> 


17 <h4> 鼠 标 事件 </h4> 

18 <hr color="blue"> 

19 <p> 

20 <img alt=" 和 鼠标 移动 事件 " src="eg_mouse2.jpg" id="bl" 
onmouseover="mouseOver()" onmouseout="mouseOut ()"/> 

2 </p> 

4 </body> 

23 </html> 

代码 解释 


代码 中 第 8 一 10 行 定义 了 三 个 JavaScript 函数 ,分 别 为 $(id)、mouseOver() 和 mouseOut()。 
第 20 行 定义 了 一 个 图 像 并 为 该 图 像 设 置 了 onMouseOver 和 onMouseOut 事件 句柄 。 当 鼠标 
移 到 图 像 区 域 时 会 触发 MouseOver 事件 执行 mouseOver0， 将 当前 图 像 更 换 为 新 的 图 像 ， 
如 图 15-11 〈a) 所 示 ; 当 鼠 标 移出 图 像 区 域 时 会 触发 MouseOnt 事件 执行 mouseOut0， 将 








(a) 户 标 移入 的 页 面 (b) 鼠标 移出 后 的 页 面 
15-11 鼠标 移动 事件 的 应 用 
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15.4 键盘 事件 


键盘 事件 主要 有 3 个 ， 分 别 是 KeyDown、KeyPress 及 KeyUp 事件 ， 它 们 
用 来 检测 键盘 按 下 、 按 下 松 开 及 完全 松 开 这 些 动 作 。 通 过 window 对 象 的 event 对 象 中 的 
eventkeyCode 可 以 获得 按键 对 应 的 键 码 值 。 

【 例 1S-4-1】 键 盘 事件 的 应 用 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 15-12 所 示 。 


tl > 

2 <!doctype html> 

3 <html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title> 键 盘 事 件 的 应 用 </title> 
<script type="text/javascript"> 

function checkNo () 








if(window.event.keyCcode!=13) 
{ 
if(event.keyCode<48 11 event .keyCode>57) {alert ("你 输入 学 号 错 
误 L 
}else{ 
if (myform.sno.value.length<=0) {alert ("学 号 不 能 为 空 ") ;} 
else{alert ("你 的 学 号 为 : "+myform.sno.value);} 


DPOLWOoOJIAUMD 


} 

¥ 

function checkName (){ 
if (window.event .keyCode==13) {alert ("你 的 姓名 为 : "+myform. 
sname.value);} 





oawm 心 mw 


20 } 

21 </script> 
22 </head> 

23 <body> 























24 <h4> 键 盘 事 件 的 应 用 </h4> 
5 <form name="myform" method="post" action=""> 
26 学 号 : <input type="text" name="sno" id="sno" onKeyPress= 
"checkNo () "> 必须 为 数字 <br> 
全 池 姓名 : <input type="text" name="sname" id="sname" onkeypress= 
"checkName () "> 回 车 显示 姓名 <br> 
28 <input type="submit" value=" 提 交 "><input type="reset"> 
29 </form> 
30 </body> 
31 </html> 
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图 15-12 键盘 事件 的 应 用 


代码 解释 

代码 中 第 7 一 21 行 定 义 了 两 个 JavaScript 函数 ， 分 别 是 checkNo0 及 checkName()。 第 
25 一 29 行 定义 了 一 个 表单 ， 在 表单 中 插入 两 个 文本 输入 框 ， 并 为 两 个 文本 输入 框 设置 了 
onKeyPress 事件 句柄 。 在 sno 文本 输入 框 中 通过 键盘 输入 学 号 时 ， 则 会 触发 KeyPress 事件 
调用 checkNo0 执 行 检 查 ， 如 果 键 盘 按 下 的 不 是 Enter 键 且 输入 的 不 是 数字 时 〈Enter 键 的 
键 码 值 是 13， 数 字 键 0 一 9 对 应 的 键 码 值 48 一 57)， 则 给 出 “你 输入 学 号 错误 !” 的 提示 信 
息 ; 如 果 用 户 按 下 的 是 Enter 键 且 输入 的 是 数字 键 ， 则 给 出 “你 的 学 号 为 : XXX” 的 提示 
信息 ; 如 果 用 户 没有 输入 数据 直接 按 下 Enter 键 ， 则 给 出 “学 号 不 能 为 空 ”的 提示 信息 。 
在 sname 文本 输入 框 中 输入 姓名 时 ， 则 会 触发 KeyPress 事件 调用 checkName(O 函 数 执行 检 
查 ， 如 果 按 下 的 是 Enter 键 则 给 出 “你 的 姓名 为 : XXX” 的 提示 信息 。 


15.5 窗口 事件 


窗口 事件 是 指 浏览 器 窗口 在 加 载 页 面 或 卸载 页 面 时 触发 的 事件 。 加 载 页 面 时 会 触发 
Load 事件 ， 务 载 页 面 时 会 触发 UnLoad 事件 ， 这 两 个 事件 与 <body> 及 <frameset> 两 个 页 面 
元 素 有 关 。 

【 例 1S-S-1】 窗 口 事件 的 应 用 。 代 码 如 下 所 示 ,， 页 面 效果 如 图 15-13 所 示 。 

1 <!-- edu 15 5 1.html --> 


2 <!doctype html> 
3 <html lang="en"> 


<head> 视频 讲解 





4 
5 <meta charset="UTF-8"> 
6 <title> 窗 口 事 件 的 应 用 </title> 
<script type="text/javascript"> 
8 function load() {alert ("欢迎 访问 本 页 面 !") ;} 
9 function unload() {alert ("欢迎 下 次 访问 !") ;} 
10 </script> 
11 </head> 
12 <body onload="load();" onunload="unload();" 
3 <h4> 窗 口 事件 的 应 用 </h4> 
14 <p onclick="alert (' 单 击 我 ! ') "> 单 击 我 ! </p> 
15 </body> 
16 </html> 
代码 解释 


代码 中 第 7 一 10 行 定义 了 两 个 JavaScript 函数 ， 分 别 是 load0、unload0 函 数 。 第 12 行 
为 该 页 面 的 body 元 素 设 置 了 onLoad 及 onUnLoad 事件 句柄 。 当 浏览 器 窗口 加 载 该 页 面 时 
会 触发 Load 事件 调用 load0 函 数 ， 弹 出 “欢迎 访问 本 页 面 !” 的 提示 信息 ， 如 图 15-13 (a) 
所 示 ; 当 单 击 段落 时 ， 触 发 Click 事件 ， 弹 出 “ 单 击 我 !” 告 警 消息 框 ， 如 图 15-13 (b) 所 
示 ; 当 关 闭 该 浏览 器 窗口 或 当前 页 面 跳 转 到 其 他 页 面 时 会 触发 unLoad 事件 ， 调 用 unload() 
函数 ， 弹 出 “欢迎 下 次 访问 !” 的 提示 信息 ， 如 图 15-13 〈c) 所 示 。 
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(a) 加 载 页 面 时 效果 图 (b) 单 击 时 效果 图 (c) 离开 页 面 时 效果 图 


图 15-13 “加载 事 件 /卸载 事件 页 面 效 果 图 


15.6 综合 实例 


在 网 页 设计 与 开发 过 程 中 ， 经 常 利 用 表单 提交 与 重 置 事件 对 表单 中 数据 进行 验证 。 例 
如 进入 当当 网 的 注册 界面 ， 输 入 数据 完成 后 单 击 “ 用 户 注册 ”按钮 ， 如 果 数据 格式 符合 要 求 
则 将 数据 提交 到 服务 器 端 , 显示 注册 成 功 ; 如 果 输 入 的 邮箱 /手机 号 码 或 密码 格式 不 正确 时 ， 


则 要 求 重新 输入 。 


用 JavaScript 程序 也 可 以 模拟 一 个 注册 过 程 ， 当 单 击 注册 按钮 时 ， 如 果 验 证 合法 ， 则 


将 数据 提交 ， 否 则 ， 继 续 保持 登录 页 ， 并 给 出 相关 提示 信息 。 


【 例 15-6-1】 用 户 注册 信息 验证 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 15-14 所 示 。 
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图 15-14 单 击 “ 用 户 注册 ”按钮 验证 页 面 效 果 图 
1 <!-- edu 15 6 1.html --> 
2 <!doctype html> 
3 <html lang="en"> 
4 <head> 
Ss <meta charset="UTF-8"> 
6 <title> 用 户 注册 页 面 </title> 
寻 <style type="text/css"> 
8 strong{color:red;font-style:bolder;} 
9 fieldset {width:560px;height:186px;padding:0px 50px;} 
10 #button{margin:10px 20px;} 
3 </style> 
12 <script type="text/javascript"> 
LE function $(id){return document .getElementById(id);} 
14 function checkReg() 
5 { 


16 Var username=$ ("myname") .value:; 


Var pwd=$ ("mypwd1") .value; 
Var pwdConfirm=$ ("mypwd2") .value; 
var checkright=true; 
if (username=="" || pwd=="")  // 两 者 中 有 一 个 为 空 
{ 
alert ("请 确认 用 户 名 和 密码 输入 是 否 正确 ! ! "); 
checkright=false; 
jelse ”// 不 为 定 ， 再 判断 用 户 名 和 密码 的 长 度 合法 性 
{ 
if (username.length<6) 
{ 
alert ("用 户 名 长 度 太 短 ， 至 少 6 个 字符 ! ! "); 
checkright=false; 
}else if(pwd.length<6){ 
alert ("密码 长 度 太 短 ， 至 少 6 个 字符 ! ! "); 
checkright=false; 
}jelse if(pwd!=pwdConfirm){ 
alert ("两 次 输入 的 密码 必须 一 致 ! ! "); 
checkright=false; 
}elsef{ 
checkright=true;} 
} 
return checkright; 
} 
function clearInfo() 
{ 
var flag = confirm(" 确 认 要 重 置 数据 吗 ? ") ; 
if (flag==true) 
{ 
$ ("myname") .value 
$ ("mypwdl") .value 
$ ("mypwd2") .value 





} 
} 


</script> 
</head> 
<body> 
<form action="regsuccess.html" method="get" onSubmit="return 
checkReg()" onReset="clearInfo()"> 
<fieldset> 
<legend align="center"” > 新 用 户 注 册 </legend><br> 
<div> 


<label > 用 gnbsp; 户 gnbsp; 名 : </label> 


<input type="text" name="myname" id="myname 


<strong> (用 户 名 要 大 于 6 位 ) </strong><br> 
<label> 登录 密码 : </label> 


<input type="password" name="mypwdl" id="mypwd1"> 


<strong> (密码 要 大 于 6 位 ) </strong><br> 
<label> 密码 确认 : </label> 


<input type="password" name="mypwd2" id="mypwd2"> 


<br> 


<input id="button" type="submit" value=" 用 户 注 册 " > 
<input id="button" type="reset" value=" 重 置 "> 


</div> 
</fieldset> 
</form> 
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69 </body> 

70 </html> 

代码 解释 

代码 中 第 12 一 51 行 定义 了 三 个 JavaScript 函数 ， 分 别 是 $(id)、checkReg()、clearInfoO 
函数 。 第 54 行为 表单 设置 了 onSubmit 和 onReset 事件 句柄 。 当 单 击 “ 用 户 注册 ”按钮 将 
表单 数据 提交 时 ， 此 时 会 触发 Submit 事件 ， 调 用 执行 代码 retum checkReg0， 首 先 判 断 用 
户 输入 的 用 户 名 称 或 密码 是 否 为 空 ， 如 果 为 空 则 弹出 提示 对 话 框 ， 并 返回 false; 接着 判断 
用 户 名 或 密码 是 否 大 于 六 个 字符 ， 如 果 不 是 则 返回 false; 最 后 判断 两 次 输入 的 密码 是 否 相 
同 ， 如 果 不 同 则 返回 false; 其 他 情况 返回 true。 

如 果 注 册 用 户 名 少 于 六 个 字符 ， 单 击 “ 用 户 注册 ”按钮 后 会 弹出 “用 户 名 长 度 太 短 ， 
至 少 6 个 字符 ! ! ”的 提示 信息 ， 如 图 15-14 所 示 。 

当 单 击 “ 重 置 ” 按 钮 将 表单 数据 重 置 时 ， 此 时 会 触发 Reset， 调 用 执行 函数 clearInfo( )， 




















新 用 户 往 册 


用 户 名 ; 915090301 人 用 户 名 要 大 于 6 位 ) 


rrr (密码 要 大 于 6 位 ) 





图 15-15 单 击 “ 重 置 ” 按 钮 时 页 面 效果 图 


本 章 小 结 


本 章 介绍 JavaScript 脚本 中 的 事件 处 理 的 概念 、 方 法 ， 列 出 了 常用 的 事件 及 事件 句柄 ， 
并 且 介绍 了 如 何 编写 用 户 自 定义 的 事件 处 理 函数 以 及 如 何 将 它们 与 页 面 中 用 户 的 动作 相关 
联 ， 以 得 到 预期 的 交互 性 能 。 
重点 介绍 了 Web 开发 中 常用 的 表单 事件 、 鼠 标 事件 、 键 盘 事件 等 。 在 表单 事件 中 ， 详 








标 事件 中 ， 详 细 介绍 鼠标 单 击 及 鼠标 移动 事件 。 在 窗口 事件 中 ， 主 要 介绍 了 装载 事件 和 外 
载 事件 。Web 前 端 开 发 人 员 只 要 掌握 JavaScript 事件 概念 、 事 件 触发 类 型 和 事件 处 理 的 方 
式 ， 就 可 以 开发 出 具有 交互 性 、 动 态 性 的 页 面 。 





练习 与 实验 
练习 15 
1. 选择 题 


(1) 以 下 选项 中 ， 鼠 标 单 击 事件 对 应 的 事件 句柄 是 。 ”)。 


A. onChange B. onLoad C. onClick D. onDblclick 
(2) 以 下 事件 中 ， 当 页 面 中 的 文本 输入 框 获 得 焦点 时 触发 的 事件 是 ( 。 ”)。 


A. click B. load C. blur D. focus 

(3) 以 下 事件 中 ， 表 单数 据 填 完 后 ， 单 击 提交 按钮 ， 会 触发 的 事件 是 3 
A. submit B. reset C. chck D. focus 

(4) 以 下 选项 中 ， 表 单 重 置 事件 对 应 的 事件 句柄 是 〈 % 
A. onSubmit B. onReset C. onChange D. onLoad 


(5) 以 下 选项 中 ， 将 validate0 函 数 和 一 个 按钮 的 单 击 事件 关联 起 来 正确 的 用 法 是 


.<input type="button " value=" 校 验 " onClick="validate( ) "> 
.<input type="button " value=" 校 验 " onDbClick="validate( ) "> 
.<input type="button " value=" 校 验 " onSubmit="validate( ) "> 

D. <input type="button " value=" 校 验 " onReset="validate( ) "> 
(6) 以 下 事件 中 ， 不 属于 键盘 事件 的 是 尖 

A. KeyDown B. KeyPress C. KeyUp D. KeyOver 
(7) JavaScript 中 的 Load 事件 的 作用 是 ( % 

A， 浏览 器 窗口 加 载 页面 时 ， 执 行 的 JavaScript 事件 

B. 浏览 器 窗口 离开 页 面 时 ， 执 行 的 JavaScript 事件 

C. 用 户 提交 一 个 表单 时 ， 执 行 的 JavaScript 事件 

D. 鼠标 移出 对 象 时 ， 执 行 的 JavaScript 事件 
2， 填 空 题 
(1) 事件 句柄 的 命名 原则 是 在 事件 名 称 前 加 上 前 绥 
(2) JavaScript 中 事件 处 理 方式 可 以 有 三 种 ， 分 别 是 


Nm 





(3) 当 表 单 中 的 表单 控件 获得 焦点 时 会 触发 事件 ， 该 事件 对 应 的 事件 句柄 
为 ; 表单 数据 提交 时 会 触发 事件 ， 该 事件 对 应 的 事件 句柄 为 
(4) 鼠标 单 击 时 会 触发 事件 ， 浏 览 器 窗口 在 加 载 页 面 时 会 触发 
事件 。 
3. 简 答题 


(1) 网 页 开发 中 常见 的 事件 类 型 有 哪些 ? 分 别 代表 什么 操作 ? 

(2) 事件 发 生 时 ， 对 事件 的 处 理 方式 有 哪儿 种 ? 

(3) 表单 事件 中 最 常用 的 事件 有 哪些 ? 举例 说 明 它们 在 实际 开发 中 的 应 用 。 
实验 15 


.编写 JavaScript 代码 实现 用 户 登录 时 数据 合法 性 校 验 功能 ， 界 面 如 图 15-16 所 示 。 
es 
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图 15-16 用户 登录 页 面 


(1) 必 填 项 验证 一 一 用 户 名 文本 输入 框 、 密 码 输入 框 必须 含有 值 。 

(2) 有 效 性 验证 一 一 用 户 名 、 密 码 长 度 大 于 等 于 8 个 字符 ， 小 于 等 于 20 个 字符 。 

(3) 当 提 交 数 据 时 ， 如 果 输 入 框 中 的 数据 不 合法 ， 则 给 出 对 应 的 提示 信息 并 将 焦点 聚 
焦 到 对 应 的 输入 框 上 。 

提示 : 使 用 域 和 域 标题 进行 窗口 布局 ， 背 景 颜色 为 上 63399。 

2. 编写 JavaScript 程序 实现 单 击 列表 框 任 一 选项 时 ， 通 过 告警 消息 框 显示 教材 名 称 及 
定价 ， 如 图 15-17 所 示 。 

(1) 页 面 标题 为 “显示 列表 项 的 内 容 ”; 

(2) 页 面 内 容 : 3 号 标题 标记 显示 标题 “显示 列表 项 的 内 容 ” 插入 一 个 大 小 为 5 的 列 
表 框 ， 用 于 显示 教材 名 称 ， 教 材 定价 保存 在 列表 项 的 value 中 ， 分 别 如 下 : 

计算 机 组 成 原理 35 元 、 数 据 结构 38 元 、 计 算 机 网 络 43 元 、Java 程序 设计 40 元 、 算 
法 分 析 28 元 。 

(3) 编写 displayItem0) 函 数 ， 实 现 当 用 户 选 择 某 一 列表 项 时 通过 告警 框 分 行 显示 选中 
的 教材 名 称 和 定价 (列表 项 的 内 容 和 value 值 )。 
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图 15-17 显示 列表 项 内 容 





第 16 章 DOM 和 BOM 





本 章 学 习 目标 


JavaScript 既 支 持 传统 的 结构 化 编程 ,同时 也 支持 面向 对 象 的 编程 , 用户 在 编程 时 可 以 
使 用 JavaScript 语言 提供 的 不 同类 型 的 对 象 ， 也 可 以 自己 定义 对 象 的 类 型 。 一 个 完整 的 
JavaScript 实现 是 由 三 个 不 同 部 分 组 成 的 ， 分 别 是 核心 ( ECMAScript )、 文 档 对 象 模型 
(Document Object Model，DOM ) 及 浏览 器 对 象 模型 (Browser Object Model，BOM). 通 
过 本 章 的 学 习 , 能 够 掌握 JavaScript 语 言 中 内 置 对 象 的 常用 属性 及 方法 ,理解 DOM 及 BOM 
的 概念 。 掌 握 运用 document 对 象 来 访问 、 创 建 及 修改 节点 ; 掌握 window 对 象 的 常用 属性 
及 方法 ; 了 解 navigator、screen、history、location 等 对 象 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 学 会 使 用 JavaScript 内 置 对 象 的 常用 属性 及 方法 。 

。 理解 文档 对 象 模型 的 节点 树 的 构建 及 节点 类 型 的 划分 。 

。 学 会 使 用 document 对 象 常用 方法 来 设计 动态 效果 的 网 页 。 

。 理解 浏览 器 对 象 模型 的 各 对 象 的 层次 关系 。 

。 学 会 使 用 window 对 象 的 定时 器 及 对 话 框 方法 。 

。 了 解 navigator、screen、history、location 等 对 象 的 属性 和 方法 。 


16.1 JavaScript 常用 对 象 


JavaScript 对 象 是 拥有 属性 和 方法 的 数据 ,采用 面向 对 象 编程 能 够 减轻 编程 人 员 的 工作 
量 ， 提 高 设计 Web 页 面 的 能 

JavaScript 的 对 象 类 型 可 以 分 为 四 类 : 

(1) 本 地 对 象 (native object)，ECMA-262 定义 为 “独立 于 宿主 环境 的 ECMAScript 实 
现 提供 的 对 象 ”。 简单 来 说 ， 本 地 对 象 就 是 ECMA-262 定义 的 类 (引用 类 型 ), 包括 Object、 
Function、 Array、 String、 Boolean、 Number、 Date、 RegExp、 Error、 EvalError、 RangeError、 
ReferenceError、SyntaxError、TypeError、URIError 等 。 这 些 对 象 独立 于 宿主 环境 ， 先 定义 
对 象 ， 实 例 化 后 再 通过 对 象 名 来 使 用 。 

(2) 内 置 对 象 (built-in object)。 由 ECMAScript 实现 提供 的 、 不 依赖 于 宿主 环境 的 对 象 ， 
在 ECMAScript 运行 之 前 就 已 经 创建 好 的 对 象 就 叫 作 内 置 对 象 。 这 意味 着 开发 者 不 必 明确 
实例 化 内 置 对 象 ， 因 为 它 已 被 实例 化 了 。ECMA-262 只 定义 了 两 个 内 置 对 象 ， 即 Global 和 
Math。Global 是 全 局 对 象 ， 全 局 对 象 只 是 一 个 对 象 ， 而 不 是 类 。 既 没有 构造 函数 ， 也 无 法 
实例 化 一 个 新 的 全 局 对 象 。 例如 isNam0 isFinite0、parseImnt0 和 parseFloat() 等 , 都 是 Global 
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对 象 的 方法 。Math 对 象 可 直接 使 用 ， 如 Math. Random()、Math round(20.5) 等 。 

(3) 宿主 对 和 象 (host object)。ECMAScript 实现 的 宿主 环境 提供 的 对 象 。 所 有 BOM 和 
DOM 对 象 都 是 宿主 对 象 ,通过 它 可 以 与 文档 和 浏览 器 环境 进行 交互 , 如 document、 window 
和 frames 等 。 

(4) 自 定义 对 象 。 根 据 程序 设计 需要 ， 由 编程 人 员 自 行 定义 的 对 象 。 例 如 定义 一 个 
person 对 象 ， 它 有 四 个 属性 分 别 是 firstName、lastName、age、eyeColor， 同 时 给 属性 赋值 。 
定义 代码 格式 如 下 所 示 : 

Var person=new Object(); /* 这 是 一 种 方法 */ 

person.firstname="Bill"; 

person.lastname="Gates"; 

person.age=56; 

person.eyecolor="blue"; 

var person={firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 

/* 另 一 方法 */ 

在 面向 对 象 编程 过 程 中 ， 所 有 对 象 都 必须 先 定义 再 实例 化 ， 然 后 才能 使 用 。 使 用 new 
运算 符 来 创建 对 象 ， 例 如 ,“var obj=new Object0;”。 定 义 后 使 用 对 象 的 方法 是 “对 象 名 称 . 
方法 名 ( )” 访问 对 象 属性 的 方法 是 “对 象 名 称 . 属 性 名 ”。JavaScript 中 包含 了 一 些 常用 的 
对 象 ， 如 Array、Boolean、Date、Math、Number、String、Object 等 。 这 些 对 象 常用 在 客 
户 端 和 服务 器 端的 JavaScript 中 ， 下 面 对 这 些 常 用 对 象 做 简单 介绍 。 


16.1.1 Array 


Array 对 象 用 于 在 单个 的 变量 中 存储 多 个 相同 类 型 的 值 ， 其 值 可 以 是 字符 串 、 数 值 型 、 
布尔 型 等 ， 但 由 于 JavaScript 是 弱 类 型 的 脚本 语言 ， 所 以 数组 元 素 也 可 以 不 一 致 。 通 过 声 
明 一 个 数组 ， 将 相关 的 数据 存 入 数组 ， 使 用 循环 等 结构 对 数组 中 的 每 个 元 素 进行 操作 。 

作为 Web 前 端 开发 人 员 , 在 编程 时 应 尽量 保证 数组 中 的 元 素数 据 类 型 相同 ， 这 是 一 种 
良好 的 编程 习惯 。 

1. 创建 Array 对 象 

1) 基本 语法 

Var stul=new Array(); 

Var stu2=new Array (size); 

Var stu3=new Array (element0, elementl, ..., elementn); 

2) 参数 说 明 

参数 size 定义 数组 元 素 的 个 数 。 返 回 的 数组 的 长 度 stu2.length 等 于 size。 

参数 element0，…，elementn 是 参数 列表 。 当 使 用 这 些 参数 来 调用 构造 函数 Array0 时 ， 
新 创建 的 数组 的 元 素 就 会 被 初始 化 为 这 些 值 。 

2. 数组 的 返回 值 

数组 变量 stul 、stu2、stu3 返回 新 创建 并 被 初始 化 了 的 数组 。 如 果 调 用 构造 函数 Array0 
时 没有 使 用 参数 ， 那 么 返回 的 数组 为 空 ， 数 组 的 length 为 0。 当 调用 构造 函数 时 只 传递 给 
它 一 个 数字 参数 ， 该 构造 函数 将 返回 具有 指定 个 数 、 元 素 为 undefined 的 数组 。 当 其 他 参数 
调用 Array0 时 ， 该 构造 函数 将 用 参数 指定 的 值 初始 化 数组 。 当 把 构造 函数 作为 函数 调用 ， 











不 使 用 new 运算 符 时 ， 它 的 行为 与 使 用 new 运算 符 调用 它 时 的 行为 完全 一 样 。 格 式 如 下 : 
var stu = [" 张 有 为 "," 蒋 丽 娟 "," 王 一 新 "," 李 大 为 "] ; 


3. 数组 元 素 初 始 化 与 修改 指定 数组 元 素 

如 果 数 组 没有 初始 化 ， 即 是 空 数组 时 ， 可 以 使 用 循环 给 数组 元 素 进行 赋值 ， 也 可 以 一 
一 赋值 。 如 : stu[i] = 表达 式 ，i 为 0 一 courselength-l 之 间 ， 也 称 为 数组 的 下 标 。 如 果 数 组 
下 标 超出 了 数组 的 边界 ， 则 返回 值 为 undefined。 可 以 用 赋值 的 方式 来 修改 数组 对 应 位 置 的 
元 素 。 代 码 如 下 所 示 : 














var stu = new Array(); /* 先 定义 数组 */ 

stu[0] = “" 王 大 为 "; /* 给 数组 元 素 赋值 */ 
stu[1] = " 李 永 明 "; /* 给 数组 元 素 赋值 */ 

var len=stu.length; /*len 的 值 为 2*/ 

stu[1] = " 张 慧 娟 "; /* 修改 数组 中 第 2 个 元 素 */ 


4. 数组 对 象 的 属性 和 方法 
Array 对 象 的 长 度 可 以 通过 length 属性 值 来 获取 。Array 对 象 最 常用 的 方法 及 说 明 如 表 
16-1 所 示 。 


表 16-1 Array 方法 及 说 明 














方 法 说 了 明 
join (分 隔 符 ) 把 数组 的 所 有 元 素 放 入 一 个 字符 串 。 元 素 通过 指定 的 分 隔 符 进行 分 隔 
Dob0 删除 开 返 辐 数 组 的 最 后 一 个 元 素 
push (新 元 素 ) 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
shiftO 删除 并 返回 数组 的 第 一 个 元 素 
unshift (新 元 素 ) 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
sort() 对 数组 的 元 素 进行 排序 
Ieverse0) 颠倒 数组 中 元 素 的 顺序 
splice() 删除 元 素 ， 并 向 数组 添加 新 元 素 
slice0) 从 某 个 已 有 的 数组 返回 选 定 的 元 素 
toStringO) 把 数组 转换 为 字符 串 ， 并 返回 结果 
toLocaleStringO) 把 数组 转换 为 本 地 数组 ， 并 返回 结果 
concatO) 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 








【 例 16-1-1】 数 组 的 属性 和 方法 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 16-1 所 示 。 


== edu 16 1 1.btm ==> 
2 <!doctype html> 
3 <html lang="en"> 











4 <head> bp: 2 
时 <meta charset="UTF-8"> 、 
6 <title> 数 组 对 象 的 应 用 </titley 视频 衣 
7 </head> 
8 <body> 
<h3> 数 组 对 象 的 应 用 </h3> 

10 <script type="text/javascript"> 

3 var stul = new Rrray(" 张 有 为 "," 蒋 丽 娟 "," 王 一 新 "," 李 大 为 ") ; 

和 var stu2 =[" 张 祥 雨 "," 姜 进步 "," 王 新 力 "，" 刘 大 山 "] ; 
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13 document .write (" 数 组 中 的 元 素 : <br>") ; 

14 // 访 问 数组 中 的 元 素 

了 5 for (var i=0;i<=stul.length-1;i++ ) 

16 { 

3 document .write (i+"-—"+stul[i]+" &nbsp;&nbsp;"); 

18 } 

19 document .write ("<br><br>"); 

20 //join 方 法 的 使 用 

21 document .write (stu2.join("-")+"<br>");//"-" 分 隔 

22 document .write (stu2.join("+")+"<br>");//"+" 分 隔 

23 document .write (stu2.join()+"<br>"); // 默 认 

24 //pop,push 方 法 的 使 用 

25 document .write ("<br> 删 除数 组 最 后 元 素 是 "+stu2 .pop () ) 

26 var s=stu2.push(" 沈 通达 ", "高 学 衡 ") ; 

2 document .write ("<br> 数 组 2 的 长 ="+s) 

28 var stul = new Rrray (" 张 有 为 "," 蒋 丽 娟 "," 王 一 新 "," 李 大 为 ") ; 

29 //shift,unshift 方 法 的 使 用 

30 var ss=stul.shift(); 

31 document .write ("<br> 删 除数 组 第 一 个 元 素 是 : "+ss); 

32 // 在 数组 开始 处 插入 新 元 素 

33 var s=stul.unshift (" 徐 丽 丽 "); // 在 IE 中 显示 undefined 

34 document .write ("<br> 数 组 元 素 分 别 : "+stul+"<br> 数 组 的 长 度 ="+s)， 
// 在 IE 中 用 stul .length 代 替 

35 </script> 

36 </body> 

37 </html> 
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中 的 元 素 ， 
0- 张 有 为 工薪 面 如 2. 王 一 新 3 李 大 为 
张 翌 再 要 进步 . 王 新 力 - 刘 大 山 

张 民 有 过 进步 二 新 为 + 划 大 山 

张 # 肌 姜 进步 王 新 为 刘 大 册 


册 除 数组 最 后 元 素 是 刘 大 山 
数组 2 的 长 = 














出 除数 组 第 一 个 元 素 是 ， 张 有 为 
| 数组 元 素 分 别 ， 徐 用 丽 . 硕 丽 娟 , 王 一 新 李 大 为 
数组 的 长 度 -undefined 








图 16-1 数组 对 象 的 应 用 


代码 解释 

代码 中 第 11 行 、 第 12 行 定义 了 两 个 数组 对 象 sul、stu2， 并 采用 两 种 方法 给 数组 赋 
值 。 第 13 一 34 行 通过 使 用 数组 的 属性 及 相关 方法 对 数组 进行 遍历 和 修改 。 

注 : 在 下 浏览 器 中 ,代码 中 第 33 行 无 法 正常 执行 ， 即 变量 s 未 赋值 ， 所 以 第 34 行 中 
显示 数组 的 长 度 为 undefined ( 未 定义 )， 而 在 其 他 浏览 器 中 能 够 正常 显示 数组 的 长 度 。 
16.1.2 Date 


JavaScript 脚本 核心 对 象 Date 用 于 处 理 日 期 和 时 间 。Date 对 象 有 很 多 方法 ， 可 以 提取 
时 间 和 日 期 。 


1. 创建 日 期 对 象 

基本 语法 : 

Var today=new Date () > 

var today=new Date (毫秒 数 ) ; 

var today=new Date (标准 时 间 格 式 字符 串 ) ; 

var today=new Date (年 ,月 ,日 ,时 ,分 , 秒 ,毫秒 ) ; 


根据 上 述 创建 方法 ， 可 以 用 下 列 格式 来 定义 日 期 对 象 。 格 式 如 下 : 


var today=new Date(); // 自 动 使 用 当前 的 日 其 和 时 间 
var today=new Date(3000); //1970 年 1 月 1 日 ，0 时 0 分 3 秒 
var today=new Date ("Apr 15,2016 15:20:00");//2016 年 4 月 15 日 15 时 20 分 0 秒 
var today=new Date(2016,3,25,14, 42,50,50); //2016 年 4 月 25 日 14 时 42 分 50 秒 


2. 日 期 对 象 的 方法 
日 期 对 象 中 包含 着 丰富 的 信息 ， 可 以 通过 日 期 对 象 提供 的 一 系列 方法 分 项 提取 出 年 、 
月 、 日 、 时 、 分 、 秒 等 各 种 信息 。Date 对 象 方法 及 说 明 如 表 16-2 所 示 。 


表 16-2 提取 日 期 对 象 每 个 字段 的 方法 及 说 明 





方 法 名 说 明 
getDate0 从 Date 对 象 返 回 一 个 月 中 的 某 一 天 (1 一 31) 
getDay0 从 Date 对 象 返回 一 周 中 的 某 一 天 (0 一 0) 
getMonthO 从 Date 对 象 返 回 月 份 (0 一 11) 
getFullYear() 从 Date 对 象 以 4 位 数字 返回 年 份 
getHours() 返回 Date 对 象 的 小 时 数 (0 一 23) 
getMinutes() 返回 Date 对 象 的 分 钟 数 (0 一 59) 
getSeconds() 返回 Date 对 象 的 秒 数 (0~~ 59 
getMilliseconds() 返回 Date 对 象 的 毫秒 数 (0 一 999) 
getTime() 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 


【 例 16-1-2】 获 得 当前 日 期 对 象 的 年 、 月 、 日 、 时 、 分 、 秒 ,并且 以 特定 的 格式 显示 在 
页 面 中 。 代 码 如 下 所 示 ， 页 面 效 果 如 图 16-2 所 示 。 


















<L== du 16 1 2.htmnl ==> 

2 <!doctype html> Kg 

3 <html lang="en"> ee 9 
4 <head> 、 

5 <meta charset="UTF-8"> 视频 讲解 
6 <title> 日 期 对 象 的 应 用 </title> 

7 </head> 

8 <body > 

9 <h4> 日 期 对 象 的 应 用 </h4> 

10 <script type="text/javascript"> 

11 Var now = new Date(); 

12 Var y = now.getFullYear (); 

和 var m now-getMonth ()+17 


14 Tar now.getDate (); 

4 Var h now.getHours (); 

16 Var mi = now.getMinutes (); 第 
和 Var s = now.getSeconds(); 16 
18 if (m<10) {m="0"+m;} 
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19 if(d<10) {d="0"+d;} 
20 if(h<10) {h= 





21 if (mi<10) {mi="0"+mi;} 

22 s=(s5<10})? ("0"+a) :sr //if(s<10) {ts="0°"+s;} 

23 var str = yt" 年 "+m+" 月 "+d+"H "+ht":"tmit":"+s; 
24 document .write (str); 

25 </script> 

26 </body> 

27 </html> 

代码 解释 


代码 中 第 11 行 定 义 了 一 个 日 期 对 象 now， 代 表 了 当前 的 日 期 时 间 。 第 12~17 行 调 用 
对 象 now 的 相关 方法 将 该 对 象 的 年 、 月 、 日 、 小 时 、 分 钟 、 秒 获取 并 显示 在 页 面 上 。 
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日 期 对 象 的 应 用 | 
| 2017 年 05 月 25 日 08:17:16 


图 16-2 ”显示 当前 系统 日 期 和 时 间 
需要 注意 的 是 ， 日 期 中 的 1 一 12 月 用 数字 0 一 11 表示 ;每 周 的 星期 日 一 星期 六 ， 用 数 
字 0 一 6 表示 。 
3. 将 日 期 转化 成 字符 串 
Date 对 象 提供 一 些 特有 的 方法 将 日 期 转换 为 字符 串 ， 而 不 需要 开发 人 员 编 写 专门 的 函 
数 去 实现 该 功能 ， 如 表 16-3 所 示 。 


表 16-3 日 期 转换 成 字符 串 的 方法 及 说 明 





方 法 名 说 了 明 
toStringO 把 Date 对 象 转换 为 字符 串 
toLocaleStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
toLocaleTimeString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateStringO) 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 


【 例 16-1-3】 日 期 转换 成 字符 串 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 16-3 所 示 。 


主妇 ==， edu 16 1 3,.html ==> 
2 <!doctype html> 
3 <html lang="en"> 











4 <head> 
5S <meta charset="UTF-8"> 视频 讲解 
6 <title> 日 期 转换 成 字符 串 的 应 用 </title> 
7 </head> 
8 <body> 
9 <h4> 日 期 转化 为 字符 串 的 应 用 </h4> 
10 <script type="text/javascript"> 
生生 Var MyDate=new Date(); 
12 Var msg=""; 
13 msg+=" 当 前 日 期 字符 串 tostring(): "+MyDate.toString()+"<br>"; 
14 msg+=" 本 地 日 期 字符 串 toLocalestring (): "+MyDate. 
toLocaleString()+"<br>"; 
15 document .write (msg); 


16 </script> 


和 于 </body> 

18 </html> 

代码 解释 

代码 中 第 11 行 定义 了 一 个 日 期 对 象 MyDate， 代 表 了 当前 的 日 期 时 间 。 第 13 行 、 第 
14 行 分 别 调用 日 期 对 象 转换 成 字符 串 的 相关 方法 将 MyDate 转换 成 字符 串 ， 并 将 结果 显示 
在 页 面 上 。 























图 16-3 日 期 转换 成 字符 串 实例 


16.1.3 Math 


Math 对 象 拥有 一 系列 的 属性 和 方法 ， 能 够 进行 比 基 本 算术 运算 更 为 复杂 的 运算 。 但 
Math 对 象 所 有 的 属性 和 方法 都 是 静态 的 ， 并 不 能 生成 对 象 的 实例 ,但 能 直接 访问 它 的 属性 
和 方法 。 

1. 使 用 Math 的 属性 

Math 的 属性 及 说 明 如 表 16-4 所 示 。 

例如 ， 计 算 一 个 圆 的 面积 时 ， 圆 周 率 就 可 以 用 Math.PI 来 代替 了 。 


var radius = 18; 
var area = Math.PI*radius*radius; 


表 16-4 Math 属性 及 说 明 
人 























属 性 名 说 明 
Math.E 
Math.LN2 
Math.LN10 返回 10 的 自然 对 笋 ( 约 等 于 2.302) 
Math. LOG2E 返回 以 2 为 底 的 e 的 对 数 〈 约 等 于 1.414) 
Math.LOG10E 返回 以 10 为 底 的 e 的 对 数 〈 约 等 于 0.434) 
Math.PI 返回 圆周 率 ( 约 等 于 3.14159) 
Math.SQRT1 2 返回 2 的 平方 根 的 倒数 〈 约 等 于 0.707) 
Math.SQRT2 返回 2 的 平方 根 〈 约 等 于 1.414) 


2. 使 用 Math 的 方法 
Math 的 方法 及 说 明 如 表 16-5 所 示 。 


表 16-5 Math 方法 及 说 明 





Math.ceil(x) 对 数 进行 上 舍 入 。 返 回 大 于 等 于 x， 并 且 与 x 接近 的 整数 
Math floor(x) 对 数 进行 下 舍 入 。 返 回 小 于 等 于 x， 并 且 与 x 接近 的 整数 
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续 表 
方 法 名 说 明 
Math round(x) 把 数 四 舍 五 入 为 最 接近 的 整数 
Math randomO | 返回 0~1 之 间 的 随机 数 
Math.max(x,y) | 返回 x 和 y 中 的 最 大 值 
Math min(x.y) | 返回 x 和 y 中 的 最 小 值 
Math.sqrt(x) 返回 数 的 平方 根 
Math.exp(x) | 返回 e 的 指数 
Math pow(x.y) 返回 x 的 y 次 究 





Math.log(x) 返回 数 的 自然 对 数 〈 底 为 e) 


Math 对 象 提供 很 多 的 数学 方法 用 于 基本 运算 ， 这 些 基 本 运算 能 够 满足 Web 应 用 程序 
的 要 求 。 例 如 ， 在 JavaScript 脚本 中 ， 可 使 用 Math 对 象 的 random() 方 法 生成 0 一 1 的 随 
机 数 。 

【 例 16-1-4】 使 用 Math 对 象 产生 任意 范围 的 10 个 随机 整数 。 代 码 如 下 所 示 ， 页 面 效 
果 如 图 16-4 所 示 。 
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上 限 : 900 


产生 数组 ， 140.469.721.211.851.267.813.766.331.603 


[a 


图 16-4 随机 数 发 生 器 实例 


1 <!-- edu 16 1 4.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 
中 <meta charset="UTF-8"> 
6 <title> 随 机 产生 [m,n] 区 间 内 10 个 整数 </title> 
7 <script type="text/javascript"> 
8 function $ (id) {return document .getElementById (id); }// 获 取 元 素 
9 function createInt () 
10 { 
11 var m=parseFloat ($("minN") .value) ; // 解 析 为 实数 
12 var n=parseFloat ($ ("maxN") .value) ; // 解 析 为 实数 
3 var array_int=new Array(); 
14 if (m>=n) // 合 法 性 检验 
Ei { alert ("数组 下 限 值 不 能 大 于 或 等 于 上 限 值 ! 请 重新 输入 "); 
16 $ ("minN") .focus(); // 让 文本 框 自动 获取 焦点 
E jelse { 
18 for (var i=0;i<10;i++) 
19 // 产 生 m-n 之 间 的 随机 数 
20 array_int[i]=Math.round( (Math.random()*(n-m) +m) ) 7 
次 二 } 
22 } 
23 $ ("array num") .value=array int.join(","); // 会 写 入 文本 框 内 


25 </Sscript> 


26 </head> 

27 <body> 

28 <h3> 随 机 产生 [m,n] 区 间 内 10 个 整数 </h3> 

法 <form name="Forml"> 

30 下 限 : <input type="text" name="minN" id="minN" size="20" 
value=10> 

3 上 限 : <input type="text" name="maxN" id="maxN" size="20" 
value=90><br><br> 

32 产生 数组 : <input type="text" name="" id="array num" size="40" 
readonly><br><br> 

33 <input type="button" value=" 产 生 10 个 随机 整数 " onclick= 
"createInt ();"> 

34 <input type="reset"> 

35 </form> 

36 </body> 

37 </html> 


上 述 代 码 中 第 7 一 25 行 定义 了 两 个 函数 ， 分 别 为 5(id)、createInt0; 第 20 行 利用 循环 
给 数组 元 素 赋值 ， 随 机 产生 [m,n] 之 间 的 整数 ， 第 29 一 35 行 定义 了 一 个 表单 ， 该 表单 包含 
三 个 文本 输入 框 和 一 个 按钮 并 为 按钮 设置 了 onClick 事件 句柄 。 当 用 户 在 文本 输入 框 中 输 
入 随机 数 的 上 限 与 下 限 后 ， 单 击 “ 产 生 10 个 随机 整数 ”按钮 时 会 触发 Click 事件 ， 调 用 
createInt0) 函 数 产 生 10 个 符合 条 件 的 随机 整数 ， 并 在 第 3 个 文本 框 中 输出 。 

产生 [m，n] 区 域内 随机 整数 的 方法 为 : 


var randomInt= Math.round( (Math.random()*(n-m) +m)); 


16.1.4 Number 


使 用 强制 类 型 转换 函数 Number(value) 可 以 把 给 定 的 值 转换 成 数字 (可 以 是 整数 或 浮 点 
数 )。Number0 的 强制 类 型 转换 与 parseInt0 和 parseFloat() 方 法 的 处 理 方式 相似 ， 只 是 它 转 
换 的 是 整个 值 ， 而 不 是 部 分 值 。 


var ss=Number (false) ; // 返 回 值 为 0 

var ss=Number (true) ; // 返 回 值 为 1 

var ss=Number (nul1) ; // 返 回 值 为 0 

var ss=Number (100) ; // 返 回 值 为 100 

var ss=Number ("5.5 "); // 返 回 值 为 5.5 

var ss=Number ("56 ") ; // 返 回 值 为 56 

var ss=Number (undefined) ; // 返 回 值 为 NaN 

var ss=Number ("5.6.7 ") ; // 返 回 值 为 NaN， 与 parseFloat (“5.6.7”) 不 同 


var ss=Number (new Object()) ; // 返 回 值 为 NaN 
16.1.5 String 

String 对 象 是 与 原始 字符 串 数据 类 型 相对 应 的 JavaScript 本 地 对 象 ， 属 于 JavaScript 核 
心 对 象 之 一 ， 主 要 提供 诸多 方法 实现 字符 串 检查 、 抽 取 子 串 、 字 符 串 连接 、 字 符 串 分 割 等 
字符 串 相 关 操 作 ， 可 以 通过 如 下 方式 生成 String 对 象 。 例 如 : 


Var sl 
var 32 


"hello,world"; 第 
new String("hello,world"); 16 
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此 外 ， 强 制 类 型 转换 String(value) 可 以 把 给 定 的 值 转换 成 字符 串 。 


var sl=String("100"); // 返 回 值 为 字符 串 100 
var sl=String("acdd"); // 返 回 值 为 字符 串 acdd 
var sl=String("false"); // 返 回 值 为 字符 串 false 
var sl=String (true); // 返 回 值 为 字符 串 true 
var sl=String(null) ; // 返 回 值 为 字符 串 nul1 
Var sl=new Array("111","222","333");alert (String(s1)); 
// 返 回 值 为 111,222, 333 
var sl=String (new Object ()) // 返 回 值 为 字符 串 [object, Object] 


1. 获取 String 对 象 长 度 属性 
String 对 象 常用 的 属性 有 length， 返 回 目标 字符 串 中 字符 数目 。 例 如 : 


var sl = "hello,world"; 


var len = sl.length; //s1.length 返 回 11，s1 所 指向 的 字符 串 有 11 个 字符 

2. 连接 两 个 字符 串 

String 对象 的 concat() 方 法 能 将 作为 参数 传 入 的 字符 串 加 入 到 调用 该 方法 的 字符 串 的 末 
尾 ， 并 将 结果 返回 给 新 的 字符 串 。 例 如 : 











var targetString=new String("Welcome to "); 
Var strToBeAdded=new String("the world!"); 
var finalString=targetString.concat (strToBeAdded); 


3， 把 字符 串 分 割 为 字符 串 数组 
split0 方 法 可 以 把 字符 串 分 割 成 字符 串 数组 。 例 如 “How are you doing today?” 的 5 个 单 
词 之 间 都 用 空格 间隔 ， 就 可 以 把 这 个 字符 串 按 照 空 格 分 成 5 个 字符 串 ， 代 码 如 下 所 示 : 


1 <script type=text/javascript> 

2 var strl = " How are you doing today?"; 

3 var subarray =strl.split(" "); //subarray 是 一 个 数组 
4 for (var i=0;i<subarray.length;i++) 

5 { 

6 document .write (subarray [i]); 

7 document .write ("<br>"); 

8 } 

9 </script> 


split0 方 法 的 返回 值 是 字符 串 数组 。 可 用 Array 对 象 的 方法 访问 字符 串 数组 中 的 元 素 。 
split0) 方 法 分 割 方法 还 有 很 多 。 例 如 : 
var subl = strl.split(""); // 把 字符 串 按 字 符 分 割 ， 返 回 数组 ["H","o"™, "w",…] 
var sub2 = strl.split("o"); // 把 字符 串 按 字符 o 分 割 ， 返 回 数组 ["H"，,"w are y", 
me 本 tt", "day?"] 
4. String 对 象 的 显示 风格 方法 
String 对 象 还 提供 了 可 以 改变 字符 串 在 Web 页 面 中 的 显示 风格 的 方法 , 如 表 16-6 所 示 。 


表 16-6 字符 串 显示 风格 的 方法 及 说 明 










方 法 名 说 了 明 说 了 明 


















blink0 ”| 显示 闪 动 字符 囊 使 用 大 字号 来 显示 字符 
boldO | 使 用 租 体 显示 字符 品 使 用 小 字号 来 显示 字符 囊 
fontcolor0 使 用 指定 的 颜色 来 显示 字符 串 使 用 删除 线 来 显示 字符 串 











使 用 指定 的 尺寸 来 显示 字符 
使 用 斜体 显示 字符 串 


把 字符 串 显示 为 下 标 
把 字符 串 显 示 为 上 标 


fontsize0 
ItalicsO 








【 例 16-1-S】 字 符 串 对 象 的 不 同 显示 风格 ， 代 码 如 下 所 示 ， 页 面 效果 如 图 16-5 所 示 。 


1 < 一 edu 16 1 5.btml = 一 > 
2 <!doctype html> 
3 <html lang="en"> 








4 <head> 

5 <meta charset="UTF-8"> 视频 讲 

6 <title> 字 符 串 显示 风格 方法 的 应 用 </tit1le> 

和 </head> 

8 <body> 

3 <h4> 字 符 串 显示 风格 方法 的 应 用 </h4> 

0 <script type="text/javascript"> 

1 Var MyString=new String("How Are You?"); 

2 document .write ("原始 字符 串 : "+MyString+"<br><hr>"); 

3 document .write ("big() 方 法 : "+MyString.big()+"<br>"); 

a document .write ("small () 方 法 : "+MyString.small()+"<br>"); 

5 document .write("bold () 方 法 : "+MyString.bold()+"<br>"); 

6 document .write("fontcolor('ff0000') 方 法 ， "+MYString . 

fontcolor('ff0000°')+ "<br>") 7 

y document .write ("fontsize (5) 方 法 : "+MyString. 

fontsize(5)+"<br>"); 

8 document .write ("italics() 方 法 : "+MyString.italics()+"<br>"); 
19 document .write ("strike() 方 法 : "+MyString.strike()+"<br>"); 
20 document .write ("sub() 方 法 : "+MyString.sub()+"<br>"); 

21 document .write ("sup() 方 法 : "+MyString.sup()+"<br>"); 
2 </script> 

23 </body> 

24 </html> 














/DD FR x 
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字符 串 显示 风格 方法 的 应 用 
原始 字符 串 : How Are You? 


big( 方 法 : How Are You? 

small 0 方法 : How Are You? 

bold0 方 法 : How Are You? 
fontcolor(ff0000") 方 法 : How Are You? 
fontsize(5) 方 法 :HOW Are You? 
italics0 方 法 : How Are You? 
strike0 方 法 : Hew Are Yeu2 

SUb0 方 法 : How Are You? 

sup0 方 法 : How Are You? 

















图 16-5 字符 串 显示 风格 实例 
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代码 解释 

代码 中 第 12 一 21 行 调用 字符 串 显示 风格 转换 函数 对 字符 串 "How Are You?" 进 行 各 种 
风格 的 转换 处 理 。 

5. 字符 串 的 大 小 写 转换 

字符 串 对 象 提 供 了 字符 串 中 的 字符 大 小 写 互相 转换 的 方法 ， 如 表 16-7 所 示 。 

表 16-7 字符 串 大 小 写 转换 的 方法 及 说 明 
方 法 名 说 了 明 

toLowerCase0 把 字符 串 转 换 为 大 写 
16.1.6 Boolean 

Boolean 对 象 是 对 应 于 原始 逻辑 数据 类 型 的 本 地 对 象 , 它 具 有 原始 的 Boolean 值 , 只 
true 和 false 两 个 状态 。 在 JavaScript 脚本 中 , 1 代表 true 状态 , 0 表 false 状态 。 创建 Boolean 
对 象 时 可 以 用 如 下 的 语句 : 


Var booleanl 
Var boolean2 











new Boolean (value) ; // 构 造 方法 
Boolean (value); // 转 换 函 数 


第 1 句 通过 Boolean 对 象 的 构造 函数 创建 对 象 的 实例 boolean1， 并 用 以 参数 形式 传 入 
的 value 值 将 其 初始 化 ， 第 2 句 使 用 Boolean( ) 函 数 创建 Boolean 对 象 的 实例 boolean2， 并 
用 以 参数 形式 传 入 的 value 值 将 其 初始 化 。 


var bl = Boolean(""); // 空 字符 串 转换 为 false 
Var b2 = Boolean ("hello"); // 非 空 字符 串 转 换 为 true 
var bl = Boolean(50); // 非 零 数字 转换 为 true 
var bl = Boolean (null); //null 转 换 为 false 
var bl = Boolean (0); // 零 转换 为 false 

var bl = Boolean (new object() ) // 对 象 转换 为 true 


需要 注意 的 是 ， 如 果 省 略 value 参数 , 或 者 设置 为 0、-0、null、"、false、undefined 或 
NaN， 则 该 对 象 设置 为 false; 否则 设置 为 tue〈 即 使 value 参数 是 字符 串 "false") 。 
下 面 所 有 的 代码 行 均 会 创建 初始 值 为 false 的 Boolean 对 象 : 


Var myBoolean=new Boolean(); 

var myBoolean=new Boolean (0); 
var myBoolean=new Boolean (null); 
Var myBoolean=new Boolean(""); 
Var myBoolean=new Boolean (false); 
Var myBoolean=new Boolean (NaN); 


下 面 所 有 的 代码 行 均 会 创建 初始 值 为 tue 的 Boolean 对 象 : 


Var myBoolean=new Boolean(1); 

Var myBoolean=new Boolean (true); 

Var myBoolean=new Boolean("true"); 

Var myBoolean=new Boolean("false"); 

Var myBoolean=new Boolean("Bill Gates"); 


Boolean 对 象 主要 有 3 个 方法 , 分别 是 toSource( )、toString( ) 及 valueOf( ) 方 法 ,toSource 


方法 返回 表示 当前 Boolean 对 象 实例 创建 代码 的 字符 串 ; toString 方法 返回 当前 Boolean 对 
象 实例 的 字符 串 〈"true" 或 "false") ; valueOf 方法 得 到 一 个 Boolean 对 象 实例 的 原始 Boolean 值 。 


16.2 HTML DOM 


16.2.1 DOM 简介 


document 对 象 是 客户 端 JavaScript 最 为 常用 的 对 象 之 一 ， 在 浏览 器 对 象 模型 中 ， 它 位 
于 window 对 象 的 下 一 层级 。document 对 象 包含 一 些 简单 的 属性 ， 提 供 了 有 关 浏览 器 中 显 
示 文 档 的 相关 信息 ， 例 如 ， 该 文档 的 URL、 字 体 颜 色 ， 修 改 日 期 等 。 另 外 ，document 对 象 
还 包含 一 些 引用 数组 的 属性 , 这 些 属 性 可 以 代表 文档 中 的 表单 、 图 像 、 链 接 、 锚 以 及 applet。 
同 其 他 对 象 一样 ，document 对 象 还 定义 了 一 系列 的 方法 , 通过 这 些 方 法 , 可 以 使 JavaScript 
在 解析 文档 时 动态 地 将 HTML 文本 添加 到 文档 中 。 

正 是 由 于 document 对 象 特有 的 重要 性 ， 所 以 从 它 出 现 开始 ， 就 在 不 停 地 扩展 。 遗憾 的 
是 , 一 开始 document 对 象 的 扩展 并 没有 统一 的 规范 ,不 同 的 浏览 器 有 不 同 的 定义 ,而 且 彼 
此 不 兼容 。 为 了 解决 不 兼容 带 来 的 问题 ， 万 维 网 联盟 (W3C) 制定 了 一 种 规范 ， 目 的 是 创 
建 一 个 通用 的 文档 对 象 模型 (Document Object Model，DOM)， 得 到 所 有 浏览 器 的 支持 。 
DOM 也 是 一 个 发 展 中 的 标准 , 它 指定 了 JavaScript 等 脚本 语言 访问 和 操作 HTML 或 者 XML 
文档 各 个 结构 的 方法 ， 随 着 技术 的 发 展 和 需求 的 变化 ，DOM 中 的 对 象 、 属 性 和 方法 也 在 
不 断 地 变化 。 

DOM 的 设计 是 以 对 象 管理 组 织 COMG) 的 规约 为 基础 的 ， 因 此 可 以 用 于 任何 编程 语 
言 。 最 初 人 们 认为 它 是 一 种 让 JavaScript 在 浏览 器 间 进行 移植 的 方法 , 不 过 DOM 的 应 用 已 
经 远 远 超出 这 个 范围 。DOM 技术 使 得 用 户 页 面 可 以 动态 地 变化 ， 如 可 以 动态 地 显示 或 隐 
藏 一 个 元 素 、 改 变 元 素 的 属性 、 增 加 一 个 元 素 等 ，DOM 技术 使 得 页 面 的 交互 性 大 大 增强 。 


16.2.2 DOM 节点 树 


HTML DOM 定义 了 访问 和 操作 HTML 文档 的 标准 方法 。DOM 将 HTML 文档 表达 为 
树 结构 ， 如 图 16-6 所 示 。HTML 文档 结构 好 像 倒置 的 一 棵 树 ， 其 中 <html> 标 记 就 是 树 的 根 
节点 ，<head>、<body> 是 树 的 两 个 子 节点 。 这 种 描述 页 面 标记 关系 的 树 形 结构 称 为 DOM 
节点 树 〈 文 档 树 )。 

【 例 16-2-1】 编 写 如 图 16-6 所 示 的 DOM 节点 树 对 应 的 HIML 文档 。 


1 <1== eda 16 2 1.html ==> 
2 <!doctype html> 
3 <html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>DOM 节 点 树 的 应 用 </title> 
</head> 
<body> 
<h1> 欢 迎 您 回 到 祖国 怀抱 </h1> 
<a href="http://www.gov.cn/"> 中 央 人 民政 府 </a> 
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iT </body> 
12 </html> 
文档 
根 元 素 : | 
<html> 
元 素 : 元 过 : 
<head> <bo 中 > 
| ri es 
元 素 属性 : 元 素 元 素 : 
<title> href <a> <hl> 
本 : 文本 : 
“文档 标题 “我 的 链接 ” “我 的 标题 

















图 16-6 DOM 节点 树 


例 16-2-1 中 的 页 面 由 <html>、<head>、<title>、<body>、<h1>、<a> 等 标记 组 成 。 
图 16-6 展示 的 DOM 节点 树 模型 就 是 对 【 例 16-2-1】 中 所 包含 的 文档 结构 的 说 明 。 


16.2.3 DOM 节点 


根据 HTML DOM 规范 ，HTML 文档 中 的 每 个 成 分 都 是 一 个 节点 。 具 体 的 规定 如 下 : 

。 整个 文档 是 一 个 文档 节点 。 

。 每 个 HIML 标记 是 一 个 元 素 节点 。 

。 包含 在 HTML 元 素 中 的 文本 是 文本 节点 。 

。 每 一 个 HTML 属性 是 一 个 属性 节点 。 

。 注释 属于 注释 节点 。 

通过 document 对 象 的 documentElement 属性 可 以 获得 整个 DOM 节点 树 上 的 任何 一 个 
元 素 。 例 如 : 


var root=document.documentElement; // 获 取 根 节点 


通过 节点 的 firstChild 和 lastChild 属性 来 获得 它 的 第 一 个 和 最 后 一 个 子 节点 。DOM 规 
定 一 个 页 面具 有 一 个 根 节点 ， 根 节点 是 没有 父 节 点 的 ， 除 此 之 外 ， 其 他 节点 都 可 以 通过 
parentNode 属性 获得 自己 的 父 节点 ， 例 如 : 

document .write (root.firstCchild.nodeName);  // 输 出 HEAD 


document .write (root.lastChild.nodeName); // 输 出 BODY 
var parentNode=bNode .parentNode; //parentNode 属 性 


同一 父 节 点 下 位 于 同一 层次 的 节点 称 为 “兄弟 节点 ”， 一 个 子 节点 的 前 一 个 节点 可 以 
用 previousSibling 属性 获取 , 对 应 的 后 一 个 节点 可 以 用 nextSibling 属性 获取 。 在 图 16-6 中 ， 
head 节点 下 的 子 节点 title 节点 以 及 script 节点 就 互 为 “兄弟 节点 ”。 从 DOM 树 中 可 以 看 
出 根 节点 没有 父 节点 , 而 最 末端 的 节点 没有 子 节点 。 不 同 节点 对 应 的 HTML 元 素 是 不 同 的 ， 
因此 节点 有 不 同类 型 。 文 档 树 中 每 个 节点 对 象 都 有 nodeType 属性 , 该 属性 返回 节点 的 类 型 ， 











常用 的 节点 类 型 及 其 说 明 如 表 16-8 所 示 。 


var nodeList=root.childNodes; 
document .write (nodeList[0] .nextSibling.nodeName) ; // 输 出 BODY 
document .write (nodeList[1] .previousSibling.nodeName); // 输 出 HEAD 


表 16-8 常用 节点 类 型 及 说 明 
节点 类 型 nodeType 值 说 明 








Element 1 元 素 节点 ， 表 示 文 档 中 的 HTML 元 素 
Attr 2 属性 节点 ， 表 示 文 档 中 HTML 元 素 的 属性 
Text 3 文本 节点 ， 表 示 文 档 中 的 文本 内 容 
Comment 8 注释 节点 ， 表 示 文 档 中 的 注释 内 容 
Document 9 文档 节点 ， 表 示 当 前 文档 








从 表 16-8 中 可 以 看 出 ， 如 果 某 个 节点 的 nodeType 的 值 为 9， 则 说 明 该 节点 对 象 为 一 
个 Document 对 象 ， 如 果 某 个 节点 的 nodeType 值 为 1， 则 说 明 节 点 对 象 为 一 个 Element 对 
象 。 不 同类 型 的 节点 还 可 以 包含 其 他 类 型 的 节点 ， 相 互 连 接 在 一 起 就 构成 了 一 个 完整 的 树 
形 结构 。 对 于 大 多 数 HTML 文档 来 说 ， 元 素 节点 、 文 本 节点 及 属性 节点 是 必 不 可 少 的 。 

1. 元 素 节点 (Element Node) 

元 素 节 点 构成 了 DOM 基础 。 在 文档 结构 中 ，<html>、<head>、<body>、<hl>、<p> 
和 <ul> 等 标记 都 是 元 素 节点 。 各 种 标记 提供 了 元 素 的 名 称 ， 如 文本 段落 元 素 的 名 称 是 p， 
无 序列 表 元 素 的 名 称 是 ul 等 。 元 素 可 以 包含 其 他 元 素 ， 也 可 以 被 其 他 元 素 包 含 。 图 16-6 显 
示 了 这 种 包含 与 被 包含 的 关系 ， 唯 独 html 元 素 没 有 被 其 他 元 素 包含 ， 因 为 它 是 根 元 素 , 代 


表 整 个 文档 。 
2. 文本 节点 (Text Node) 
元 素 节点 只 是 节点 树 中 的 一 种 类 型 ， 如 果 文 档 完全 由 元 素 组 成 ， 那 么 这 份 文档 本 身 将 


不 包含 任何 信息 ， 因 此 文档 结构 也 就 失去 了 存在 的 价值 。 在 HTML 文档 中 ， 文 本 节点 包含 
在 元 素 节点 内 ， 如 hl、pP、I 等 节点 就 可 以 包含 一 些 文本 节点 。 

3. 属性 节点 (Attribute Node) 

元 素 一 般 都 会 包含 一 些 属性 ， 属 性 的 作用 是 对 元 素 做 出 更 具体 的 描述 。 例 如 ， 一 般 元 
素 都 有 title 属性 , 该 属性 能 够 对 元 素 进行 详细 地 描述 或 说 明 , 以 便 用 户 了 解 该 元 素 的 用 途 、 
作用 或 功能 。 示 例如 下 : 

<img src="image2.jpg" title=" 三 星 手机 " /> 

在 上 例 的 img 标记 中 ，title 就 是 一 个 属性 节点 ， 由 于 属性 总 是 被 放 在 起 始 标记 内 ， 所 
以 属性 节点 总 是 被 包含 在 元 素 节点 当中 ， 可 以 通过 元 素 节点 对 象 调用 getAttribute( ) 方 法 来 


16.2.4 DOM 节点 访问 


访问 节点 的 方式 有 很 多 种 , 可 以 通过 document 对 象 的 方法 来 访问 节点 , 也 可 以 通过 元 
素 节点 的 属性 来 访问 节点 。 结 合 【 例 16-2-2】 来 进行 具体 分 析 。 
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【 例 16-2-2】 DOM 节点 访问 的 应 用 。 代 码 如 下 所 示 。 


1 = Siu 16 2 2.html ==> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

YY <meta charset="UTF-8"> 

6 <title>DOM 节 点 访问 </title> 

过 <script type="text/javascript"> 

8 function validate() 

9 { 

10 // 此 处 为 用 户 登录 时 的 校 验 处 理 代码 
了 主 } 

和 </script> 


于 3 </head> 
14 <body> 


15 <form method="post" action="" name="myform"> 

16 <fieldset style="width:350px;height:150px;text-align:center;"> 
2 <legend align="center"> 用 户 信 息 </legend> 

18 用 户 名 :<input type="text" name="username" id="username"><br> 
19 密码 :<input type="password" name="password" id="password"><br> 
20 邮箱 :<input type="text" name="email" id="email"><br> 

21 <input type="button" value=" 提 交 " onclick="validate();"> 
22 <input type="reset"> 

23 </fieldset> 

24 </form> 

25 </body> 

26 </html> 


如 果 要 对 【 例 16-2-2】 中 的 用 户 名 文本 输入 框 、 密 码 输入 框 及 邮箱 地 址 文本 输入 框 进 
行 访问 的 话 ， 可 以 通过 如 下 几 种 方式 进行 访问 。 
1. 通过 getElementById( ) 方 法 访问 节点 
document 对 象 的 getElementById() 方 法 可 以 访问 页 面 中 的 节点 ， 该 方法 在 使 用 时 ， 必 
须 指定 一 个 目标 元 素 的 id 作为 参数 。 
1) 基本 语法 
var s=document .getElementById (id) ; // 调 用 时 参数 需要 加 双 引 号 
在 使 用 该 方法 时 需要 注意 以 下 两 点 : 
。 id 为 必 选 项 ， 对 应 于 页 面 元 素 属性 id 的 属性 值 ， 类 型 为 字符 串 型 。 在 页 面 设计 时 最 
好 给 每 一 个 需要 交互 的 元 素 设 定 一 个 唯一 的 ia， 以 便 查 找 。 
。 该 方法 返回 的 是 一 个 页 面 元 素 的 引用 , 如果 页 面 上 出 现 了 不 同 元 素 使 用 了 同一 个 id， 
则 该 方法 返回 的 只 是 第 一 个 找到 的 页 面 元 素 ， 如 果 给 定 的 id 没有 找到 对 应 的 元 素 ， 
则 返回 null。 
通过 此 方法 可 以 编写 一 个 通过 id 获取 HTML 文档 上 元 素 的 通用 方法 $(id)。 


function $ (id) {return document .getElementById(id);} // 调 用 时 参数 需要 加 双 引 号 


对 【 例 16-2-2】 中 的 脚本 做 一 些 修改 ， 当 用 户 输入 用 户 名 、 密 码 及 邮箱 地 址 后 ， 单 击 
提交 按钮 ， 触 发 该 按钮 的 单 击 事件 ， 调 用 其 绑 定 的 事件 处 理 函 数 validate0， 通 过 告警 消息 
框 显 示 用 户 输入 的 用 户 名 、 密 码 及 邮箱 等 信息 。 代 码 如 下 所 示 : 





1 <script type="text/javascript"> 
学 function $(id) {return document .getElementById (id) 7} 
3 function validate(){ 
4 var msg =" 用户 名 为 : " 
5 Var username = $ ("username") .value; 
6 Var psw = $ ("password") .value; 
Var email = $ ("email") .value; 
8 msg=msgtusername+"\n 密 码 为 :"+ psw+"\n 邮 箱 地 址 为 :"+ email; 
9 alert (msg); // 输 出 
10 } 
11 </script> 
2) 代码 解释 


代码 中 用 户 名 文本 输入 框 、 密 码 输入 框 、 邮 箱 文本 输入 框 的 id 分 别 为 usemame、 


password、email。 代 码 中 定义 了 两 个 函数 ， 分 别 是 Sid) 和 validate0， 其 中 ，$(id) 功 能 是 通 
过 id 获取 HTML 页 面 上 的 任 一 元 素 ; validate0 功 能 是 通过 $(id) 函 数 获取 特定 元 素 , 并 获取 
该 元 素 的 value 值 。 代 码 中 第 5 一 7 行 通过 id 获取 每 个 文本 框 中 输入 的 值 , 然后 通过 告警 消 
息 框 输出 信息 。 


2. 通过 getElementsByName( ) 方 法 访问 节点 

除 通 过 元 素 的 id 可 以 获取 对 象 外 ， 还 可 以 通过 元 素 的 名 字 来 访问 。 

1) 基本 语法 

var s=document .getElementsByName ("name"); 

在 使 用 该 方法 时 需要 注意 以 下 两 点 : 

。 name 为 必 选 项 ， 对 应 于 页 面 元 素 属性 name 的 属性 值 ， 类 型 为 字符 串 型 。 该 方法 调 
用 时 返回 的 是 一 个 数组 ， 即 使 对 应 于 该 名 字 的 元 素 只 有 一 个 。 

。 如 果 指 定名 字 ， 在 页 面 中 没有 相应 的 元 素 存 在 ， 则 返回 一 个 长 度 为 0 的 数组 ， 程 序 
中 可 以 通过 判断 数组 的 length 属性 值 是 否 为 0 判断 是 否 找到 了 对 应 的 元 素 。 

通过 此 方法 可 以 编写 一 个 通过 name 获取 HTML 文档 上 的 一 组 元 素 的 通用 方法 





ERR: 
视频 讲解 


$name(name)， 此 函数 返回 一 个 对 象 数组 。 





function $name (name) {return document .getElementsByName (name);} 


// 调 用 时 参数 需要 加 双 引 号 
如 果 将 JavaScript 程序 中 的 getElementById() 方 法 替换 成 getElementsByName() 方 法 来 


获取 用 户 名 、 密 码 及 邮箱 地 址 ， 则 脚本 代码 需要 做 如 下 修改 : 


1 <script type="text/javascript"> 

2 function $name (name) {return document .getElementsByName (name);} 

3 function validate(){ 

4 Var msg =" 用 户 名 为 : " 

5 Var username=$name ("username") [0] .value; // 取 用 户 名 

6 Var psw=$name ("password") [0] .value; // 取 密码 

加 Var email=$name ("email") [0] .value; // 取 邮箱 

8 msg=msg+username+"\n 密 码 为 :"+ psw+"\n 邮 箱 地 址 为 :"+ email; 

9 alert (msg); // 输 出 
10 } 第 
1 </script> 16 
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2) 代码 解释 

代码 中 用 户 名 文本 输入 框 、 密 码 输入 框 、 邮 箱 文本 输入 框 的 name 分 别 为 usemame、 
password 、email 。 代 码 中 定义 了 两 个 函数 ， 分 别 是 Sname(name) 和 validate()， 其 中 ， 
$name(name) 功 能 是 通过 name 获取 HTML 页 面 上 的 特定 元 素数 组 ，validate() 功 能 是 通过 
$name(name) 函 数 获取 特定 元 素数 组 中 第 0 个 元 素 ， 格 式 为 Sname("usemame")[0]， 并 获取 
该 元 素 的 value 值 ， 代 码 中 第 5 一 7 行 可 以 获取 每 个 文本 框 中 输入 的 内 容 ， 然 后 通过 告警 消 
息 框 输出 信息 。 

3. 通过 getElementsByTagsName( ) 方 法 访问 节点 

除了 通过 元 素 的 id 和 name 可 以 获得 对 应 的 元 素 外 , 还 可 以 通过 标记 名 称 。” 回 航 襄 肖 
来 获得 页 面 上 所 有 同类 的 元 素 ， 如 表单 中 的 所 有 input 元 素 。 视频 讲解 

1) 基本 语法 

Var s=document .getElementsByTagName (tagname); 

在 使 用 该 方法 时 需要 注意 以 下 两 点 : 

。 tagname 为 必 选 项 ， 对 应 于 页 面 元 素 的 类 型 ， 为 字符 串 型 的 数据 。 该 方法 调用 时 返 
回 的 是 一 个 数组 ， 即 使 页 面 中 对 应 于 该 类 型 的 元 素 只 有 一 个 。 

。 通过 判断 数组 的 length 属性 值 来 获知 页 面 上 该 类 型 元 素 的 总 数 。 

通过 此 方法 可 以 编写 一 个 通过 tagname 获取 HTML 文档 中 的 一 组 元 素 的 通用 方法 
S$tag(tagname)， 此 函数 返回 一 个 对 象 数 组 。 
function S$tag(tagname) {return document .getElementsByTagName (tagname);} 
// 调 用 时 参数 需要 加 双 引 号 
如 果 在 JavaScript 程序 中 用 getElementsByTagName 方法 来 获取 用 户 名 、 密 码 及 邮箱 地 
则 脚本 代码 需要 做 如 下 修改 : 
1 <script type="text/javascript"> 


2 function S$tag (tagname) {return document .getElementsByTagName 
(tagname);} 

















芋 


3 function validate(){ 
4 var msg =" 用 户 名 为 : " 
5 var username=$tag ("input") [0] .value; // 取 用 户 名 
6 Var psw=$tag ("input") [1] .value; // 取 密码 
时 var email=$tag("input") [2] .value; // 取 邮箱 
8 msg=msg+username+"\n 密 码 为 :"+ psw+"\n 邮 箱 地 址 为 :"+ email; 
9 alert (msg); // 输 出 
10 } 
11 </script> 
2) 代码 解释 


在 【 例 16-2-2】 中 ， 由 于 用 户 名 输入 框 、 密 码 输入 框 、 邮 箱 输入 框 及 按钮 ， 它 们 都 是 
<input> 类 型 的 元 素 ， 所 以 可 以 一 次 通过 $tag(tagname) 函 数 获取 页 面 上 所 有 的 input 标记 元 
素 ， 得 到 的 是 一 个 input 类 型 的 元 素数 组 ， 然 后 依次 访问 数组 中 的 每 个 成 员 。 代 码 中 第 5 一 
7 行 通过 数组 的 下 标 依次 获取 每 个 文本 框 的 值 ， 然 后 通过 告警 消息 框 输出 信息 。 

4. 通过 form 元 素 访问 节点 

如 果 要 获得 页 面 中 的 form 对 象 ， 除 了 getElementById( )、getElementsByName( ) 方 法 


外 ， 还 可 以 通过 document 对 象 的 forms 属性 来 获得 这 个 form 对 象 。 表 单 是 用 户 与 网 页 进 
行 交互 的 重要 手段 ， 通 过 表单 可 以 一 次 性 获取 表单 中 大 量 元 素 的 信息 。 获 得 【 例 16-2-2】 
文档 中 的 form 对 象 的 方法 如 下 所 示 : 











var myfrm = document .forms; // 通 过 document 的 forms 属 性 获得 数组 对 象 
var myloginform = myfrm[0]; // 获 得 数组 中 的 第 一 个 Form 对 象 
当然 也 可 以 通过 form 对 象 的 name 属性 来 访问 到 页 面 中 的 form 对 象 。 格 式 如 下 所 示 : 
var myform = document.1oginformy; //loginform 为 form 对 象 的 名 称 


获得 form 对 象 之 后 ， 如 果 想 得 到 form 对 象 包含 的 其 他 元 素 , 就 可 以 通过 form 对 象 的 
elements 属性 或 该 元 素 的 name 属性 来 获得 ， 例 如 ， 前 面 代码 获得 了 form 对 象 ， 可 以 通过 
如 下 程序 获得 该 form 对 象 包 含 的 用 户 输入 框 、 密 码 框 或 邮箱 地 址 框 。 


var username1l=loginform.elements[0];  // 通 过 elements 属 性 来 访问 用 户 名 输入 框 


var username2=loginform.username; // 通 过 name 属 性 来 访问 用 户 名 输入 框 

var passwordl=loginform.elements[1];  // 通 过 elements 属 性 来 访问 密码 输入 框 
var password2=loginform.password; // 通 过 name 属 性 来 访问 密码 输入 框 

var emaill=loginform.elements[2]; // 通 过 elements 属 性 来 访问 邮箱 地 址 输入 框 
var email2=loginform.email; // 通 过 name 属 性 来 访问 邮箱 地 址 输入 框 


16.2.5 DOM 节点 操作 


前 面 已 经 学 过 了 如 何 访 问 文档 中 的 不 同 节 点 ， 不 过 这 仅仅 是 使 用 DOM 所 能 实现 的 功 
能 中 的 一 小 部 分 。DOM 的 应 用 非常 广泛 ， 如 可 以 通过 document 对 象 实现 表格 的 动态 添加 
和 删除 ， 可 以 通过 document 对 象 蔡 换文 本 节点 的 内 容 等 。 

1. 创建 和 修改 节点 

document 对 象 有 很 多 创建 和 修改 不 同类 型 节点 的 方法 ， 常 用 方法 如 表 16-9 所 示 。 


表 16-9 创建 和 修改 节点 的 方法 及 说 明 














方 法 名 说 ”了 明 
createElement(tagname) 创建 标记 名 为 tagname 的 节点 
createTextNode(text) 创建 包含 文本 text 的 文本 节点 
createDocumentFraement() 创建 文档 碎片 
createAttribute() 创建 属性 节点 
createComment(text) 创建 注释 节点 
removeChild(node) 删除 一 个 名 为 node 的 子 节点 
appendChild(node) 添加 一 个 名 为 node 的 子 节 点 





insertBefore(nodeB.,nodeA) 在 名 为 nodeA 节点 前 插入 一 个 名 为 nodeB 的 节点 
replaceChild(nodeB.nodeA) 用 一 个 名 为 nodeB 节点 替换 另 一 个 名 为 nodeA 的 节点 
克隆 一 个 节点 , 它 接收 一 个 boolean 参数 , 为 tue 时 表示 该 节点 带 文字 ; 
Pope oo en 为 false 时 表示 该 节点 不 带 文字 
假设 要 在 一 个 HIML 页 面 中 添加 一 个 <p> 节 点 ，<p> 节 点 内 的 文本 内 容 是 “Hello 
World!”， 在 此 可 以 使 用 createElement()、createTextNode() 及 appendChild0 方 法 来 实现 。 





DOM 无 BOM 


Web 诫 开交 老大 一 TINMTLI、CSS3、JavaScript ( 荔 了 猎 ) 





【 例 16-2-3】 运 用 document 对 象 在 网 页 中 创建 文本 节点 。 其 页 面 效 果 如 图 16-7 所 示 。 











图 16-7 创建 节点 实例 


在 此 例 中 创建 段落 p 元 素 并 为 段落 设置 文本 节点 内 容 ， 共 分 四 个 步骤 : 


var newp = document.createElement ("p"); // 第 1 步 ， 创 建 p 元 素 节点 
var ptext = document.createTextNode ("hello world! ") ;// 第 2 步 ， 创 建文 本 节点 


newp.appendChild (ptext); // 第 3 步 ， 将 文本 节点 加 入 到 p 元 素 中 
document . forms [0] .appendChild (newp); // 第 4 步 ， 将 元 素 p 节 点 插入 到 表单 form 中 
按照 以 上 给 定 的 步骤 编写 代码 如 下 所 示 : 

1 <!-- edu 16 2 3.html --> 


2 <!doctype html> 
3 <html lang="en"> 


4 <head> 

5 <meta charset="UTF-8"> 

6 <title> 创 建 节点 的 应 用 </title> 

7 <script type="text/javascript"> 

8 function createP(){ 

9 Var newp =document.createElement ("p"); 
10 Var ptext = document .createTextNode ("Hello World! "); 
1 newp.appendChild (ptext); 

E document .forms [0] .appendChild (newp); 
13 } 
14 </script> 


15 </head> 
16 <body> 


1 <form name="forml"> 

18 <input type="button" value=" 点 击 创 建 节点 " onClick="createP()"> 
19 </form> 

20 </body> 

21 </html> 


上 述 代码 中 第 8 一 13 行 定义 了 一 个 JavaScript 函数 ， 名 为 createPO; 第 17 一 19 行 定义 
了 一 个 表单 ， 在 表单 中 插入 一 个 普通 按钮 ， 并 为 该 按钮 的 onClick 事件 句柄 绑 定 了 事件 处 
理 函 数 createPO。 当 单 击 按钮 时 会 触发 Click 事件 调用 createPO 向 表单 中 添加 节点 <p>， 并 





将 其 文本 内 容 设置 为 “Hello World!”。 i 
除了 添加 一 个 节点 外 ， 也 可 以 使 用 removeChild0 、insertBefore0 及 ”党 N 公 给 
IeplaceChild() 方 法 删除 、 插 入 和 蔡 换 节点 。 [Dr 


【 例 16-2-4】 节 点 删除 、 插 入 和 替换 。 其 页 面 效果 如 图 16-8 所 示 。 视频 讲解 





前 请 开 发 技术 : -hs 
国 的 是 世界 的 ! -newp 
中 国 的 ! 了 














世界 的 也 是 中 国 的 ! 了 


























图 16-8 节点 修改 前 /后 界面 


1 t= edu 16. 2 4.btml = 一 > 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
S <meta charset="UTF-8"> 
6 <tit1le> 节 点 删除 、 插 入 、 蔡 换 </title> 
7 <script type="text/javascript"> 
8 function S$tag (tagname) { 
return document .getElementsByTagName (tagname);} 
9 function operateNode (){ 
10 // 删 除 <p> 元 素 
于 业 var p =$tag("p") [0]; 
2 document . forml .removeChild (p); 
#3 // 将 <h2> 元 素 更 换 为 <h5> 元 素 ， 并 重新 设置 文本 节点 内 容 
14 Var h5 =document.createElement ("h5"); 
15 var ptext = document .createTextNode ("web 前 端 开发 技术 ! -h5")， 
16 h5.appendChild (ptext); 
17 var h2 = S$tag("h2") [0]; 
18 document . forml .replaceChild (h5,h2); 
19 //b 元 素 前 插入 一 个 <p> 元 素 
20 var newp =document.createElement ("p"); 
于 var ptext1l = document .createTextNode ("中 国 的 是 世界 的 ! 
-new p"); 
22 newp .appendChild (ptext1); 
光子 document . forml .insertBefore (newp,Stag("b") [0]); 
24 } 
25 </script> 


26 </head> 
27 <body> 


28 <form name="form1"> 

29 <h2>javaScript 程 序 设 计 -h2</h2> 

30 <p>hello world!-p</p> 

31 <b> 世 界 的 也 是 中 国 的 ! -b</b><br> 

32 <input type="button" value=" 单 击 修改 节点 "onClick= 
"operateNode () "> 

33 </form> 

34 </body> 

35 </html> 


上 述 代 码 中 第 7 一 25 行 定义 了 两 个 JavaScript 函数 ， 分 别名 为 $tag(tagname)、 
operateNode(); 第 28 一 33 行 定义 了 一 个 表单 对 象 ， 表 单 中 有 <h2>、<p>、<b>、<input> 四 
个 节点 ， 并 设置 普通 按钮 的 onClick 属性 值 为 operateNode()。 当 单 击 按钮 时 会 触发 Click 事 
件 调用 operateNode0， 执 行 其 中 的 代码 。 在 代码 执行 过 程 中 ， 首 先 会 将 页 面 上 的 <p> 节 点 
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删除 ， 然 后 将 <h2> 节 点 替换 成 <h5> 节 点 并 将 <h5> 节 点 中 的 文本 内 容 设置 为 “web 前 端 开发 
技术 ! -h5”， 最 后 在 <b> 节 点 前 插入 一 个 <p> 节 点 并 将 该 节点 中 的 文本 内 容 设置 为 “中 国 的 
是 世界 的 ! -newp”。 

除了 以 上 例子 中 介绍 的 方法 用 来 创建 和 修改 节点 之 外 , 还 可 以 使 用 cloneNode( 方 法 复 
制 一 个 节点 ， 使 用 createDocumentFragment() 方 法 创建 文档 片段 ， 在 此 就 不 一 一 举例 了 。 

2. 节点 的 innerText 和 innerHTML 属性 

在 DOM 中 有 两 个 很 重要 的 属性 ， 分 别 是 innerText 和 innerHTML， 通 过 这 两 个 属性 ， 
可 以 更 方便 地 进行 文档 操作 。 

innerText 属性 是 用 来 修改 起 始 标记 和 结束 标记 之 间 的 文本 。 例如 , 假设 有 个 空 的 <div> 
节点 ， 如 果 希 望 在 该 <div> 设 置 文本 内 容 为 “中 国 你 好 !!”， 则 按照 前 面 的 介绍 ， 代 码 需 要 
这 样 编写 : 


oDiv.appendChild (document .createTextNode ("中 国 你 好 !! "); 


如 果 使 用 innerText， 代 码 就 可 以 这 样 编写 : 


oDiv.innerText=" 中 国 你 好 !! "; 


使 用 innerText， 代 码 更 加 简洁 ， 且 更 容易 理解 。 另 外 ，innerText 会 自动 将 小 于 号 、 大 
于 号 、 引 号 和 人 符号 进行 HTML 编码 ， 所 以 不 需要 担心 这 些 特 殊 字 符 。 

innerHTML 属性 可 以 直接 给 元 素 分 配 HTML 字符 串 , 而 不 需 考 虑 使 用 DOM 的 方法 来 
创建 元 素 。 例 如 ， 为 空 的 <div> 节 点 创建 <sttong> 子 节点 ， 运 用 DOM 方法 创建 的 代码 如 下 : 

Var strongl =document .createElement ("strong"); 

Var otext = document .createTextNode ("hello world! ") 


strongl .appendChild(otext) 
oDiv.appendChild(strong1l1) 


如 果 使 用 innerHTML 属性 ， 代 码 变 成 ; 


oDiv.innerHTML="<strong> hello world! </strong>"; 


使 用 innerHTML 属性 ， 四 行 代码 变 成 一 行 ， 通 俗 易 懂 ! 

还 可 以 使 用 innerText 和 innerHTML 属性 获取 元 素 的 内 容 。 如 果 元 素 只 包含 文本 ， 则 
innerText 和 innerHTML 返回 相同 的 值 。 但 是 ， 如 果 同 时 包含 文本 和 其 他 元 素 ，innerText 
将 只 返回 文本 的 内 容 ， 而 innerHTML 将 返回 所 有 元 素 和 文本 的 HIML 代码 。 

【 例 16-2-$S】document 对 象 的 innerText 和 innerHTML 属性 的 应 用 。 代 码 如 下 所 示 ， 页 
面 效果 如 图 16-9 所 示 。 


1 <!-- edu 16 2 5.html --> 
2 <!doctype html> 国航 
3 <html lang="en"> 
<head> 视频 讲解 

<meta charset="UTF-8"> 

<title>innerText、innerHTML 举 例 </title> 

<script type="text/javascript"> 

function textGet (){ 
Var oDiv = document .getElementById ("oDiv"); 











加 oo ~ wm 心 


10 var msg = "通过 innerText 属 性 获得 : "; 


1 msg+=oDiv.innerText; 

12 msg+="\n 通 过 innerHTML 属 性 获得 : " 
3 msg+=oDiv.innerHTML; 

14 alert (msg); 

5 } 

16 </script> 

37 </head> 

18 <body onload="textGet () "> 

19 <div id="oDiv" > 

20 <strong>web 前 端 开发 技术 ， 不 错 ! </strong> 
汪 介 </div> 

22 </body> 

23 </html> 


€ S BLT TER Err 


web 前 端 开发 技术 ， 不 错 ! 
来 自 网 页 的 消息 








通过 innerText 必 性 获得 : web 前 该 开发 技术 ,不错 ! 
通过 innerHTML 属 性 获得 : <STRONG >web 前 苇 开 发 技术 ,不错 ! 
</STRONG> 




















图 16-9 innerText、innerHTML 属性 的 应 用 


上 述 代码 中 第 7 一 16 行 定 义 了 一 个 JavaScript 函数 ， 名 为 textGet(); 第 18 行 给 body 
标记 设置 onload 事件 句柄 ， 绑 定 了 事件 处 理 函 数 textGet()。 窗 口 装载 时 ， 调 用 事件 处 理 函 
数 textGet0， 通 过 告警 消息 框 输 出 信息 ， 如 图 16-9 所 示 。 

3. 获取 并 设置 指定 元 素 属性 

在 DOM 中， 如 果 需 要 动态 地 获取 及 设置 节点 属性 的 话 ， 可 以 通过 getAttribute( 方 法 、 
setAttribute() 方 法 来 处 理 ， 具 体 方法 的 使 用 说 明 如 表 16-10 所 示 。 


表 16-10 获取 和 设置 节点 属性 的 方法 及 说 明 





方 法 名 说 了 明 
getAttribute(name) 该 方法 用 于 获取 元 素 指定 属性 的 值 。 参 数 name 为 字符 串 ， 表 示 属 性 的 名 称 





i je) | 该 方法 用 于 设置 元 素 指 定 属性 的 值 。 参 数 name 为 字符 串 ， 表 示 要 设置 的 届 
setAttibutename'value) | 性 的 名 称 ， 参 数 value 为 字符 串 ， 表 示 属性 的 什 


【 例 16-2-6】DOM 节点 属性 获取 和 设置 方法 。 代 码 如 下 所 示 ， 页 面 效果 如 图 16-10 所 示 。 


1 <!-- edu 16 2 6.html --> 
2 <!doctype html> 

3 <html lang="en"> 

<head> 回 : 
<meta charset="UTF-8"> 视频 讲解 
<title> 获 得 、 设 置 节 点 属性 </title> 

<style type="text/css"> 
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8 td{text-align:center;} 

9 </style> 

10 <script type="text/javascript"> 

a var bg begin; // 保 存 原始 值 

12 function getBgColor (){ 

13 bg begin=$ ("myTable") .getAttribute ("bgColor"); 

// 保 存 原始 值 

14 } 

5 function $(id) {return document.getElementById(id);} 

16 function randomInteger(){ // 随 机 产生 0-255 之 间 的 整数 
17 var int=Math .floor (Math.random()*256) 7 

18 return int; 

19 } 
20 function changeColor (){ 
21 $ ("myTable") .setAttribute ("bgColor", createHexColor ()); 
22 } 
23 function createHexColor () {// 产 生 十 六 进 制 颜色 串 #FFFFFF 
24 var rc=randomInteger() .tostring(16); // 转 换 为 十 六 进 制 
25 var gc=randomInteger() .tostring(16); // 转 换 为 十 六 进 制 
26 var bc=randomInteger() .toString(16);  // 转 换 为 十 六 进 制 
27 Var colorl="#"+rctgctbc; // 形 成 6 位 十 六 进 制 数 
28 return colorl; 
29 } 
30 function restoreColor(){ 
31 $ ("myTable") .setRttribute("bgColor",bg_begin) 
32 } 
33 </script> 


34 </head> 
35 <body onload="getBgColor () "> 
36 <form method="post" action=""> 


<table id="myTable" align="center" border="1" bgColor= 
"#99cccc" width="500px" > 


38 < 七 > 

39 <caption> 专 业 学 生花 名 册 </caption> 

40 <td> 序 号 </td><td> 姓 名 </td><td> 学 号 </td><td> 专 业 </td> 

41 </tr> 

42 <tr> 

43 <td>1</td><td> 储 致 衡 </td><td>1209520112</td> ”<tqd> 计 算 机 
科学 与 技术 </td> 

44 EE 

45 <tr> 

46 <td>2</td><td> 李 大 舌 </td><td>1303020122</td><td> 软 件 工程 
</td> 

47 </tr> 

48 <tr> 

49 <td colspan="4"><input type="button" value=" 设 置 新 颜色 " 
onclick="changeColor () "><input type="button" value=" 恢 复 
原 颜 色 (获取 )" onclick="restoreColor()"></td> 

50 < 

号 和 </table> 

E74 </form> 

53 </body> 


54 </html> 


[Le 
| OO Be 2 ox 











图 16-10 获取 、 设 置 节点 属性 方法 的 应 用 


代码 解释 

代码 中 第 10 一 33 行 定义 了 六 个 JavaScript 函数 ， 分 别 是 $(id)、randomInteger()、 
changeColor()、restoreColor()、createHexColor()、getBgColor(); 其 中 $(id) 功 能 是 通过 id 获 
取 页 面 元 素 ; randomInteger() 功 能 是 产生 0 一 255 的 任意 一 个 整数 ，changeColor0 功 能 是 改 
变 表 的 背景 颜色 ; restoreColor0 功 能 是 恢复 表 的 上 次 背景 颜色 ; createHexColor() 功 能 是 产 
生 一 个 十 六 进 制 的 颜色 ， 如 #EF88EE; getBgColor0 功 能 是 获取 表格 初始 背景 颜色 。 

第 37 一 51 行 定义 了 一 个 表格 ， 表 格 的 背景 颜色 属性 bgColor 初始 值 为 #99cccc。 第 49 
行 定义 了 一 个 “设置 新 颜色 ”按钮 ， 并 为 该 按钮 设置 了 onClick 事件 句柄 ， 每 单 击 一 次 调 
用 changeColor0 更 改 表格 的 背景 颜色 一 次 。 第 49 行 还 定义 了 一 个 “恢复 原 颜 色 (获取 )” 按 
钮 ， 并 为 该 按钮 设置 了 onClick 事件 句柄 ， 单 击 一 次 调用 restoreColor0 还 原 为 上 一 次 表格 
的 背景 颜色 。 


16.3 BOM 


在 实际 应 用 中 ， 常 常 使 用 JavaScript 操作 浏览 器 窗口 以 及 窗口 上 的 控件 ， 从 而 实现 用 
户 和 页 面 的 动态 交互 功能 。 因 而 浏览 器 预定 义 了 很 多 内 置 对 象 ， 这 些 对 象 都 含有 相应 的 属 
性 和 方法 ， 通 过 这 些 属性 和 方法 控制 浏览 器 窗口 及 其 控件 。 客 户 端 浏览 器 这 些 预定 义 的 对 
象 统称 为 浏览 器 对 象 ,它们 按照 某 种 层次 组 织 起 来 的 模型 统称 为 浏览 器 对 象 模 型 (Browser 
Object Model，BOM)。 浏览 器 对 象 模型 定义 了 浏览 器 对 象 的 组 成 和 相互 关系 ， 描 述 了 浏览 
器 对 象 的 层次 结构 ， 是 Web 页 面 中 内 置 对 象 的 组 织 形式 。 

浏览 器 对 象 的 模型 如 图 16-11 所 示 ， 从 图 中 不 仅 可 以 看 到 浏览 器 对 象 的 组 成 ， 还 可 以 
看 到 不 同 对 象 的 层次 关系 ，window 对 象 是 顶层 对 象 ， 包 含 了 document、history、location、 
navigator、screen 及 frame 对 象 。 这 些 对 象 都 含有 若干 属性 和 方法 ， 使 用 这 些 属 性 和 方法 可 
以 操作 Web 浏览 器 窗口 中 的 不 同 对 象 ， 控 制 和 访问 HIML 页 面 中 的 不 同 内 容 。 
16.3.1 window 对 象 

window 对 象 位 于 浏览 器 对 象 模型 的 顶层 ， 是 document、frame、location 等 其 他 对 象 的 
父 类 。 在 实际 应 用 中 ， 只 要 打开 浏览 器 ,无 论 是 否 存在 页 面 ，window 对 象 都 将 被 创建 。 由 
于 window 对 象 是 所 有 对 象 的 顶层 对 象 ， 所 以 按照 对 象 层 次 访问 某 一 个 对 象 时 不 必 显 式 地 
注 明 window 对 象 。 
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图 16-11 浏览 器 对 象 模型 


window 对 象 内 置 了 许多 方法 供用 户 操作 ， 下 面 列 出 最 常用 的 window 对 象 的 方法 ， 如 
表 16-11 所 示 。 

window 对 象 提供 了 三 种 用 于 客户 与 页 面 交 互 的 对 话 框 ， 分 别 是 告警 框 、 确认 框 和 提示 
框 等 ， 这 三 种 对 话 框 使 用 方法 在 14.2.3 节 中 已 经 介绍 过 了 ， 在 此 不 再 重复 。 

window 对 象 还 提供 一 些 定时 器 方法 ， 这 些 方法 可 以 使 JavaScript 代码 周期 性 地 重复 或 
延迟 执行 。 例 如 ，window 对 象 的 setImterval(0) 方 法 用 于 设置 在 指定 的 时 间 间 隔 内 周期 性 地 
触发 某 个 事件 ， 典 型 的 应 用 如 动态 状态 栏 、 动 态 显示 当前 时 间 等 ;, clearInterval0 方 法 用 于 
清除 该 间隔 定时 器 使 目标 事件 的 周期 性 触发 失效 。 下 面 的 例子 中 调用 这 两 个 方法 实现 窗口 
状态 栏 的 移动 。 


表 16-11 window 对 象 的 方法 及 说 明 


方法 名 说 明 
alert(message) 显示 带 有 一 段 消息 和 一 个 确认 按钮 的 告警 框 
confirm(question) 显示 带 有 一 段 消息 以 及 确认 按钮 和 取消 按钮 的 对 话 框 





打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
显示 可 提示 用 户 输入 的 对 话 框 


open(url,name,features,replace) 


prompt(“ 提 示 信 息 ”， 默认 值 ) 


























blur0 把 键盘 焦点 从 顶层 窗口 移 开 

close() 关闭 浏览 器 窗口 

focus0) 把 键盘 焦点 给 予 一 个 窗口 

setInterval(code,interval) 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 
setTimeout(code,delay) 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 
clearInterval(intervalID) 取消 由 setInterval0 设 置 的 timeout 
clearTimeout(timeoutID) 取消 由 setTimeout0 方 法 设置 的 timeout 


【 例 16-3-1】window 对 象 的 定时 器 方法 实现 div 内 字符 串 的 移动 。 代 码 如 下 所 示 ， 页 
面 效果 如 图 16-12 所 示 。 


各 = 天 一 EE ee 


C | @ Hiley//F/Web 前 并 开发 技术 -第 3 版 -20170518/ 到 学 宗 列 及 光源 /ch16/edu_16_.， 从 | 











深 动 区 域 
欢迎 来 到 javascript 世 界 ! 
单 击 对 应 的 按钮 ， 实 现 图 屋内 字符 率 滚动 与 停止 ! 


开始 图 层 内 闻 符 认 滚 动 
停止 图 层 内 字符 罕 漆 动 





























图 16-12 div 内 字符 串 滚 动 界面 


代码 用 下 列 代码 全 部 替换 。 


01 六 一 -edu 16 3 1.html -> 
02 <!doctype html> 
03 <html lang="en"> 


04 
05 
06 
07 
08 
09 
10 
入 
12 
13 
14 
45 
16 
入 


<head> 
<meta charset="UTF-8"> 
<title> 图 层 内 字符 串 滚动 显示 </title> 
<style type="text/css"> 





#myDiv{width:100%;height:24px;background:#DDFFAA;} 


</style> 
<script type="text/javascript"> 
var TimerID; 
var loop=1;// 设 置 启动 次 数 ， 防 止 多 次 启动 
var dir=1;// 设 置 方 向 变量 初 值 
var str num=0; // 用 于 动态 显示 的 目标 字符 串 
var str=" 欢 迎 来 到 javascript 世 界 !"; 


function $ (id){return document .getElementById(id);} 


function startMove(){ 
// 设 定 图 层 内 动态 显示 的 字符 串 信 息 
Var str space=""; 
str_ num=str numtl*dir; // 动 态 改变 运动 步 长 
if(str num>50 || str num<0){ dir=-1l*dir; } 
for (var i=0;i<str num;i++) {str space+=" ";} 


// 改 变 运动 方向 


$ ("myDiv") .innerHTML="<h3>"+str_spacet+str+"</h3>"; // 动 态 赋值 


} 
function MyStart (){ 


// 图 层 内 字符 串 滚动 开始 
if (loop==1) {TimerID=setInterval ("startMove( 
loopt++; 


1 
function MyStop(){ 


// 图 层 内 字符 串 滚动 结束 ， 并 更 新 图 层 内 字符 串 


clearInterval (TimerID) > 


loop=1; // 恢 复 初始 值 


De" 00) 


$ ("myDiv") .innerHTML="<h3> 图 层 内 字符 串 深 动 结束 !</h3>"; 


} 
</script> 
</head> 
<body > 
<h3 align="center"> 滚 动 区 域 </h3> 
<div name="" id="myDiv"> 欢 迎 来 到 JavaScript 世 界 !</div> 
<div style="text-align:center;"> 
<p> 单 击 对 应 的 按钮 ， 实 现 图 层 内 字符 串 滚动 与 停止 !</P> 


<form name="MyForm"> 
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44 <input type="button"” value=" 开 始 图 层 内 字符 串 滚 动 " onclick= 
"MyStart () "> <br> 

45 <input type="button" value=" 停 止 图 层 内 字符 串 滚 动 " onclick= 
"MYStop () "> <br> 

46 </form> 

47 </div> 

48 </body> 

49 </html> 

代码 解释 


代码 中 第 10 行 一 第 36 行 定义 了 4 个 JavaScript 函数 ,分 别 为 $(id)、startMoveO、MyStart()、 
MyStop0; 第 44 行 、 第 45 行 定义 了 两 个 普通 按钮 ,分别 是 “开始 图 层 内 字符 串 深 动 ”按钮 
及 “停止 图 层 内 字符 串 滚动 ”按钮 ， 并 为 这 两 个 按钮 设置 了 onClick 事件 句柄 。 
当 单 击 “ 开 始 图 层 内 字符 串 深 动 ”按钮 时 会 触发 事件 调用 MyStar0， 执 行 其 中 的 代码 
“ TimerID=setInterval("startMove();",100); ”， 这 条 语句 的 作用 是 间隔 100ms 会 执行 
startMove()， 实 现 div 内 字符 串 的 滚动 效果 ， 并 把 返回 值 赋 给 变量 TimerID; 当 单 击 “ 停 止 
图 层 内 字符 串 滚 动 ” 按 钮 时 会 触发 事件 调用 MyStop0， 代 码 “clearInterval(TimerID);” 的 
作用 是 清除 该 问 隔 定时 器 使 目标 事件 的 周期 性 触发 失效 。 代 码 第 27 行 的 作用 是 单 击 1 次 
“开始 图 层 内 字符 串 滚动 ”按钮 时 启动 间隔 执行 startMove()， 当 多 次 单 击 此 按钮 时 不 重复 
执行 。 
16.3.2 ” Navigator 对 象 


navigator 对 象 用 于 获取 用 户 浏 览 器 的 相关 信息 。 该 对 象 是 以 Netscape Navigator 命名 
的 ， 在 Navigator 和 Internet Explorer 中 都 得 到 了 支持 。navigator 对 象 包含 若干 属性 ， 主 要 
用 来 描述 浏览 器 的 信息 ,但 不 同 浏览 器 所 支持 的 navigator 对 象 的 属性 也 是 不 同 的 ， 常 用 的 
属性 如 表 16-12 所 示 。 








表 16-12 navigator 对 象 的 属性 及 说 明 

















属 性 名 说 了 明 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
platform 返回 运行 浏览 器 的 操作 系统 3 于 到 
systemLanguage 返回 操作 系统 使 用 的 默认 语言 
UserAgent 返回 由 客户 机 发 送 服务 器 的 user-agent 头 部 的 值 
appCodeName 返回 浏览 器 的 代码 名 


另外 ，navigator 对 象 还 支持 一 系列 的 方法 ， 与 属性 一 样 ， 不 同 浏览 器 支持 的 方法 也 不 
完全 相同 。 常 用 的 方法 如 表 16-13 所 示 。 


表 16-13 navigator 对 象 的 方法 及 说 明 











taintEnabled() 规定 浏览 器 是 否 启 用 数据 污点 (data tainting) 
javaEnabled() | 规定 浏览 器 是 否 启用 Java 
preference() | 查询 或 者 设置 用 户 的 优先 级 ， 该 方法 只 能 用 在 Navigator 浏览 器 中 





savePreference() 保存 用 户 的 优先 级 ， 该 方法 只 能 用 在 Navigator 浏览 器 中 





【 例 16-3-2】navigator 对 象 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 16-13 所 示 。 












1 <1-= edgu 16 了 过 ,htEmL =-> 

2 <!DOCTYPE html> 

3 <html> 

4 <body> 

5 <div id="example"></div> 

6 <script> 

章 txt = "<p>1.Browser CodeName: " + navigator.appCodeName + "</p>"; 
8 "<p>2.Browser Name: " + navigator.appName + "</p>"; 





9 "<p>3.Browser Version: " + navigator.appVersion + "</p>" 
10 "<p>4.Cookies Enabled: "+ navigator.cookieEnabled + "</p>"; 
11 "<p>5.Platform: " + navigator.platform + "</p>"; 

12 "<p>6.User-agent header: " + navigator.userAgent + "</p>"; 

13 txt+= "<p>7.User-agent language: " + navigator.systemLanguage + 
"</p>"; 

14 document .getElementById ("example") .innerHTML=txt; 

15 </script> 

16 </body> 

17 </html> 





eo 重 - 生 - 
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1,Browser CodeName: Nozilla 
2. Browser Name: Microsoft Internet Explorer 


3. Browser Version: 5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 
2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4. 0C; .NET4. 0E; InfoPath. 3) 


‖ 4. Cookies Enabled: true 
5.Platform: Win32 


6. User-agent header: Nozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; . 
CLR 2.0.50727; .NET CLR 3.5. 30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath. 3) 


了 .User-agent language: zh-cn 




















图 16-13 ”navigator 对 象 的 应 用 


代码 解释 
代码 中 第 7 一 13 行 获取 浏览 器 对 象 的 属性 值 给 变量 txt 赋值 , 第 14 行 通过 id 获取 页 面 
中 的 div， 将 txt 的 值 赋 给 div 的 innerHTML 属性 。 


16.3.3 Screen 对 象 


screen 对 象 用 于 获取 用 户 屏幕 设置 的 相关 信息 ， 主 要 包括 显示 尺寸 和 可 用 颜色 的 数量 
信息 。 表 16-14 中 给 出 screen 对 象 常用 的 属性 ， 这 些 属性 得 到 了 各 种 浏览 器 的 普遍 支持 。 


四 16-14 screen 站 











方 法 名 说 了 明 
avail Width i 返回 显示 屏幕 的 高 度 第 
availHeight 返回 可 用 的 屏幕 高 度 返回 显示 屏幕 的 宽度 16 
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在 浏览 器 窗口 打开 的 时 候 ， 可 以 通过 screen 对 象 的 属性 来 获取 屏幕 设置 的 相关 信息 。 
【 例 16-3-3】screen 对 象 的 应 用 。 代 码 如 下 所 示 ， 其 页 面 效 果 如 图 16-14 所 示 。 




















1 <!-- edu 16 3 3.html --> 
2 <!doctype html> 
3 <html lang="en"> i 
4 <head> 回避 
5 <meta charset="UTF-8"> 
视频 时 
6 <title>screen 对 象 的 应 用 </title> 间 解 
2 <script type="text/javascript"> 
8 function getScreenInfo(){ 
9 document .write ("<h3>screen 对 象 的 信息 </h3><br>") ; 
10 document .write ("屏幕 的 总 高 度 : "+screen .height+"<br>") ; 
11 document .write ("屏幕 的 可 用 高 度 : "+screen.availHeight+"<br>"); 
12 document .write ("屏幕 的 总 宽度 : "+screen.width+"<br>"); 
3 document .write ("屏幕 的 可 用 宽度 : "+screen.availWidth+"<br>"); 
14 $ 
15 </script> 
16 </head> 
17 <body onload="getScreenInfo () "> 
18 </body> 
19 </html> 
7 本 二 Le © lm 
[¢ 回 | 导 FMWeb 前 该 开 全 局 = X | FAWebii 开 发 技术 -…. x 
screen 对 象 的 信息 
屏幕 的 总 高 度 ，900 
屏幕 的 可 用 高 度 ，860 
屏幕 的 总 宽度 ，1440 
屏幕 的 可 用 宽度 ，1440 
图 16-14 screen 对 象 的 应 用 
代码 解释 


代码 中 第 8 一 14 行 定 义 了 一 个 JavaScript 函数 ， 名 为 getScreenInfo(); 第 17 行为 body 
标记 设置 了 onLoad 事件 句柄 ， 当 浏览 器 加 载 该 页 面 时 调用 getScreenInfo0， 执 行 代 码 。 
16.3.4 History 对 象 

history 对 象 表示 窗口 的 浏览 历史 ,并 由 window 对 象 的 history 属性 引用 该 窗口 的 history 
对 象 。history 对 象 是 一 个 数组 ， 其 中 的 元 素 存储 了 浏览 历史 中 的 URL， 用 来 维护 在 Web 
浏览 器 的 当前 会 话 内 所 有 曾经 打开 的 历史 文件 列表 。history 对 象 有 三 个 常用 的 方法 ， 如 表 
16-15 所 示 。 








表 16-15 history 对 象 的 方法 及 说 明 








方 法 名 说 明 
forward0) | 加 载 history 列表 中 的 下 一 个 URL 
backO | 加 载 history 列表 中 的 前 一 个 URL 





加 载 history 列表 中 的 某 个 具体 页 面 。URL 参数 指定 要 访问 的 URL; number 参数 
指定 要 访问 的 URL 在 history 的 URL 列表 中 的 位 置 


go(number|URL) 





history 对 象 的 这 三 个 方法 与 浏览 器 软件 中 的 “后 退 ” 和 “前 进 ” 按 钮 的 功能 一 致 。 需 
要 注意 的 是 ， 如 果 没 有 使 用 过 “后 退 ” 按 钮 或 跳 转 菜单 在 历史 记录 中 移动 ， 而 且 JavaScript 
没有 调用 historyback0 或 history.go0 方 法 ， 那 么 调用 history.forward0 方 法 不 会 产生 任何 效 
果 ， 因 为 浏览 器 已 经 处 在 URL 列表 的 尾部 ， 没 有 可 以 前 进 访问 的 URL 了 。 在 实际 应 用 中 
的 代码 如 下 所 示 : 











history-back() // 与 单 击 浏览 器 后 退 按钮 执行 的 操作 一 样 
history.go (-2) /7 与 单 击 2 次 浏览 器 后 退 按钮 执行 的 操作 一 样 
history.forward() // 等 价 于 单 击 浏览 器 前 进 按钮 或 调用 history .go (1) 


16.3.$S ”Location 对 象 


location 对 象 用 来 表示 浏览 器 窗口 中 加 载 的 当前 文档 的 URL， 该 对 象 的 属性 说 明了 
URL 中 的 各 个 部 分 ， 如 图 16-15 所 示 。 


href 








polesol host pathname search hash 
Pttp: www. dreamdu. com: 8080/dreamdu. php?q=dreamdu &l=zh-CN#hash 
hostname Ee 


图 16-15 location 对象 属 性 示意 图 
location 对 象 的 常用 属性 如 表 16-16 所 示 。 
表 16-16 location 对 象 的 属性 及 说 明 


属性 名 属性 名 说 明 
hash 设置 或 返回 从 井 号 (办 开始 的 URL( 锚 ) 设置 或 返回 当前 URL 的 端口 号 


href 设置 或 返回 完整 世 设置 或 返回 当前 URL 的 路 径 部 分 


hostname | 设置 或 返回 URL 中 的 主机 名 jo re 


protocol | 设置 或 返回 当前 URL 的 协议 ee 号 (开始 的 URL( 查 











通过 设置 location 对象 的 属性 ， 可 以 修改 对 应 的 URL 部 分 ， 而 且 一 旦 location 对 象 的 
属性 发 生变 化 ， 就 相当 于 生成 了 一 个 新 的 URL, 浏览 器 便 会 尝试 打开 新 的 URL。 虽 然 可 以 
通过 改变 location 对 象 的 任何 属性 加 载 新 的 页 面 ， 但 是 一 般 不 建议 这 么 做 ， 正 确 的 方法 是 修 
改 location 对 象 的 herf 属性 , 将 其 设置 为 一 个 完整 的 URL 地 址 , 从 而 实现 加 载 新 页 面 的 功能 。 

location 对 象 和 document 对 象 的 location 属性 是 不 同 的 ，document 对 象 的 location 属 
性 是 一 个 只 读 字符 串 ， 不 具备 location 对 象 的 任何 特性 ， 所 以 也 不 能 通过 修改 document 对 
象 的 location 属性 实现 重新 加 载 页 面 的 功能 。 

location 对 象 除了 上 面 所 述 的 属性 以 外 , 还 具有 三 个 常用 的 方法 , 用 于 实现 对 浏览 器 位 
置 的 控制 。location 对 象 的 方法 如 表 16-17 所 示 。 


表 16-17 location 对 象 的 方法 及 说 明 


























方 法 名 i 方 法 名 说 明 
Teload0) 到 当前 文档 replace() 新 的 文档 替换 当前 文档 
assign() 
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在 实际 应 用 中 的 代码 如 下 所 示 : 


location.assign ("obj .html");// 转 到 指定 的 URL 资 源 
location.reload ("obj .html") ;// 加 载 指定 的 URI 资 源 
location.replace ("obj .html") ;// 新 的 URL 资 源 会 替换 当前 的 资源 


【 例 16-3-4】location 对 象 的 应 用 。 代 码 如 下 所 示 ， 页 面 效果 如 图 16-16 所 示 。 


1 <!-- edu 16 3 4.html --> 
2 <!doctype html> 
3 <html lang="en"> 





4 <head> 

5 <meta charset="UTF-8"> 

6 <script type="text/javascript"> 

7 function currLocation() {alert (window.1location)} 

8 function newLocation() {location.href="http://www. baidu. com"} 


9 </script> 
10 </head> 
11 <body> 





12 <input type="button" onclick="currLocation()"” value=" 显 示 当 前 的 
URL"> 
13 <input type="button" onclick="newLocation()"” value=" 改 变 URL- 百 
度 "> 
14 </body> 
15 </html> 
[el®| ¥ | 
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图 16-16 location 对 象 的 应 用 


上 述 代码 中 第 7 行 、 第 8 行 定义 了 两 个 函数 名 分 别 为 currLocation()、newLocation(); 
第 12 行 ,第 13 行 在 body 标记 插入 两 个 普通 按钮 ,分 别 是 “显示 当前 的 URL ”和 “改变 URL- 
百度 ”。 当 选择 “显示 当前 的 URL” 按 钮 时 ， 通 过 告警 消息 框 输出 ; 当选 择 “ 改 变 URL- 
百度 ”按钮 时 ， 在 本 窗口 打开 百度 页 面 。 





16.4 综合 实例 


以 “Web 前 端 开发 技术 ”网 络 课程 网 站 开发 为 例 ， 设 计 一 个 含有 二 级 水 平 导航 菜单 、 
图 像 切换 、 下 拉 列 表 导 航 等 功能 的 网 站 ， 如 图 16-17 所 示 。 
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Web 前 端 开 发 技术 课程 简介 





一 、 课 程 的 性 质 、 地 位 与 任务 主体 区 
《Web 料 端 开发 技术 》 《又 名 ~Web 奉 户 端 编程 "课程 是 计算 机 科学 与 村 大 
信息 管理 与 信息 系统 、 软 件 工程 等 专业 的 一 门 基础 课程 ， 也 是 贡 他 计算 机 相关 专 
烛 的 秋 及 时 齐 各， 通过 对 Web 几 江天 发 三 大 注 江 技术 学 四 科 研究， 让 条 千 理 生 和 
、JavaScript 革 本 巩 程 订 言 、CSS 竺 相关 知识 ， 通 过 实验 次 养 学 生 

eb 后 宙 汪 并 民办 作 扫 术 和 友 放 令 二 - 








图 16-17 Web 前 端 开发 技术 网 络 课程 网 站 首页 


页 面 布 局 设计 
i 16-17 所 示 的 页 面 效 果 设计 页 面 布 局 ， 如 图 16-18 所 示 。 





图 16-18 网 站 首页 布局 设计 


2. 网 站 中 实现 的 主要 技术 

。 DIV+CSS+JavaScript 实现 的 二 级 导航 菜单 。 

。 JavaScript 实现 图 像 自动 定时 切换 。 

。 Window 对 象 open 方法 和 select 对 象 的 options、selecctedIndex 属性 实现 下 拉 列 表 导 

航 功能 。 

1) JS 二 级 导航 菜单 

二 级 水 平 导航 菜单 实现 技术 分 析 : 一 级 菜单 、 二 级 菜单 在 不 同 区 域 中 单独 显示 ; 一 级 
导航 菜单 采用 无 序列 表 实 现 ， 一 个 标记 表示 一 个 主导 航 栏目 ， 两 个 导航 栏目 之 间 插 入 一 
个 分 隔 线 ( 空 卫 标记 ,设置 背景 图 像 ) ; 在 一 级 导航 菜单 上 设置 onmouseover 事件 句柄 属性 ， 
绑 定 事件 处 理 函 数 qiehuan(num); 二 级 导航 菜单 显示 规则 : 默认 显示 第 一 个 一 级 导航 栏目 
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对 应 的 二 级 导航 菜单 ， 其 余 二 级 菜单 默认 是 不 显示 ， 只 有 当 鼠 标 悬 停 (盘旋 ) 在 相应 的 一 级 
导航 菜单 上 时 才能 调用 qiehuanum) 函 数 ， 将 id 为 “qh_ con”-+num 的 div 的 display 属性 
值 改 为 block, 显示 其 对 应 的 二 级 导航 菜单 ; 所 有 的 二 级 导航 菜单 分 别 定义 在 不 同 的 div 中 。 





一 级 导航 菜单 结构 如 下 : 

1 <ul id="nav"> 

2 <li><a class="nav on" id="mynav0" onmouseover="javascript:qiehuan 
(0)" href="web first.html" target="framebody"><span> 首 页 </span></a> 
</1i> 

委 <li class="menu line"></1i> 

4 <li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynavV1" 


class="nav_off"><span> 课 程 简介 </span></a></1i> 


5 <li class="menu line"></1i> 

6 <1i><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" 
class="nav_off"><span> 主 讲 教师 </span></a></1i> 

三 

8 </ul> 


二 级 导航 菜单 统一 放 在 一 个 id 为 “menu_con” 的 父 div 中 ， 每 一 个 二 级 子 菜单 单独 放 
在 一 个 独立 的 子 div 中 。CSS 样式 定义 参见 style2menu.css， 二 级 导航 菜单 结构 如 下 : 


1 <div id="menu con"> 

2 <div id="qh _con0" style="display: block"> <!-- 第 一 个 子 菜单 --> 
3 <ul> 

4 <1i><a href="#"><span> 课 程 发 展 </span></a></1i> 

5 <1li class="menu line2"></1i> <!-- 子 菜单 分 隔 线 --> 
6 <1i><a href="#"><span> 课 程 特色 </span></a></1i> 

WW <1li class="menu line2"></1i> <!-- 子 菜单 分 隔 线 --> 
8 <1i><a href="#"><span> 教 学 成 果 </span></a></1i> 

9 </ul> 


10 </div> 
43 <div id="qh con1l" style="display: block"> <!-- 第 二 个 子 菜单 --> 


4 加 

和 3 </div> 

14 3 <!-- 第 n 个 子 菜单 --> 
15 </div> 


2) 图 像 自动 定时 切换 

图 像 自动 定时 切换 实现 技术 分 析 : 在 一 个 div 中 插入 一 个 图 像 的 超 链接 , 定义 图 像 img 
标记 的 id， 通过 JavaScript 获取 img 标记 对 象 ， 动 态 修改 img 的 src 属性 ， 实 现 图 像 切换 。 
使 用 window 对 象 的 setInterval(code,interval)、clearInterval(intervalID) 两 个 方法 来 实现 时 间 
执行 代码 和 取消 执行 代码 。 在 switchpicjjs 中 定义 初始 化 init0、 切 换 switchPic0、 重 新 鼠标 
移出 reStart0、 鼠 标 悬 停 pause() 共 四 个 JavaScript 函数 。 

3) 下 拉 列 表 框 导航 

下 拉 列 表 框 导航 实现 技术 分 析 : 设置 select 标记 的 onchange 事件 句柄 属性 ， 并 绑 定 事 
件 代码 ， 直 接 使 用 window 对 象 的 open(url,name,features,replace) 实 现在 单 击 下 拉 列 表 框 中 
任 一 选项 时 ， 能 够 打开 相关 的 超 链 接 。 代 码 如 下 : 

1 <select size="1" name="d1™" 

onchange="window.open (this.options[this.selectedindex] .value) "> 
<option> 网 络 课程 资源 链接 </option> 


<option value="http://www.icourses.cn/home/"> 中 国 mooc 大 学 </option> 
</select> 








2 
3 
4 
5 


第 2 行 设置 onchange=window.open(this.options[this.selectedindex].value)。 第 4 行 设 置 
option 标记 的 value 属性 指定 目标 URL。 其 中 列表 框 对 象 有 options(i) (返回 列 表 框 某 一 列 
表 项 ) 、selectedIndex (返回 选 中 项 的 序号 ) 属性 。 

3. 主要 的 实现 代码 

1) 页 面 HTML 代码 edu_16 4 1.html 


1 <!doctype html> 

2 <html lang="en"> 

3 <head> 

4 <title>web 前 端 开 发 技术 课程 网 站 </title> 

各 <meta charset="UTF-8"> 

6 <meta name="keywords" content="html, css, javascript, web 前 端 开发 "/> 

7 <meta name="description" content="web 前 端 开发 技术 ,html、css、 
javascipt 技 术 ， 开 发 综合 实例 "” /> 

8 <link href="style2menu.css" rel="stylesheet" type="text/css" /> 

9 <script type="text/javascript" src="qiehuan.js"></script> 

10 <script type="text/javascript" src="switchpic.js"></script> 

了 </head> 

12 <body onload="init ();"> 









13 <div id="container" class 

14 <div id="header" class 

15 <img src="images/web logo.jpg" alt=""> 

16 </div> 

17 <div id="menu out"> 

18 <div id="menu in"> 

19 <div id="menu"> 

20 <ul id="nav"> 

a1 <li><a class="nav_on" id="mynav0" onmouseover= 


"javascript:qiehuan(0)" href="web first.html" target= 
"framebody"><span> 首 页 </span></a></1i> 





人 22 <1i class="menu line"></1i> 

23 <1i><a href="#" onmouseover="]javascript:qiehuan (1) " 
id="mynavl" class="nav_off"><span> 课 程 简介 </span></a> 
</1i> 

24 <1li class="menu line"></1i> 

25 <li><a href="#" onmouseover="javascript:qiehuan(2)" 
id="mynav2"” class="nav_off"><span> 主 讲 教师 </span> 
</a></1i> 

26 <li class="menu line"></1i> 

27 <li><a href="#" onmouseover="javascript:qiehuan(3)" 
id="mynav3"” class="nav_off"><span> 教 学 团队 </span></a> 
</1i> 

28 <1li class="menu line"></1i> 

29 <li><a href="#" onmouseover="javascript:qiehuan(4)" 
id="mynav4" class="nav_off"><span> 教 学 课件 </span></a> 
</1i> 

30 <1li class="menu line"></1i> 

31 <1i><a href="#" onmouseover="javascript:qiehuan(5)" 
id="mynav5" class="nav_off"><span> 实 验 项 目 </span></a> 
</1i> 

32 <li class="menu line"></1i> 

33 <li><a href="#" onmouseover="javascript:qiehuan(6)" 
id="mynav6" class="nav_off"><span> 课 程 设计 </span></a> 
</1i> 

34 <li class="menu line"></1i> 

35 <li><a href="#" onmouseover="javascript:qiehuan(7)" 
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id="mynav7" class="nav_off"><span> 在 线 测验 </span></a> 





</1i> 
36 <1li class="menu line"></1i> 
37 <li><a class="nav off" id="mynav8" onmouseover= 
"javascript:qiehuan (8)"” href="#"><span> 网 络 资源 </span> 
</a></1i> 
38 </ul> 
39 <div id="menu con"> 
40 <div id="qh con0" style="display: block"> 
41 <ul> 
42 <1i><a href="#"><span> 课 程 发 展 </span></a></1i> 
43 <li class="menu line2"></1i> 
44 <1i><a href="#"><span> 课 程 特色 </span></a></1i> 
45 <1i class="menu line2"></1i> 
46 <1i><a href="#"><span> 教 学 成 果 </span></a></1i> 
47 </ul> 
48 </div> 
49 <div id="qh conl" style="display: none"> 
50 <ul> 
5 <1i><a href="#"><span> 教 学 大 纲 </span></a></1i> 
52 <li class="menu line2"></1i> 
53 <1i><a href="#"><span> 教 学 计划 </span></a></1i> 
54 <li class="menu line2"></1i> 
55 <li><a href="web practice.html" target= 


"framebody"> 
<span> 实 验 计 划 </span></a></1i> 


56 </ul> 

57 </div> 

58 <div id="qh con2" style="display: none"> 

59 <ul> 

60 <1i><a href="#"><span> 教 学 工作 </span></a></1i> 

61 <1i class="menu line2"></1i> 

62 <1i><a href="#"><span> 教 学 改革 </span></a></1i> 

63 <1i class="menu line2"></1i> 

64 <1i><a href="#"><span> 科 研 成 果 </span></a></1i> 

65 </ul> 

66 </div> 

67 <div id="qh con3" style="display: none"> 

68 <ul> 

69 <1i><a href="#"><span> 储 久 良 </span></a></1i> 

70 <1i class="menu line2"></1i> 

3 <1i><a href="#"><span> 姜 gnbsp; gnbsp; 枫 </span> 
</a></1i> 

72 <1i class="menu line2"></1i> 

73 <1i><a href="#"><span> 王 &nbsp; gnbsp; 独 </span> 
</a></1i> 

74 </ul> 

75 </div> 

76 <div id="qh con4" style="display: none"> 

77 <ul> 

78 <li><a href="#"><span>HTML-PPT</span></a></1i> 

39 <1li class="menu line2"></1i> 

80 <li><a href="#"><span>CSS-PPT</span></a></1i> 

81 <1li class="menu line2"></1i> 

82 <li><a href="#"><span>JavaScript-PPT</span> 
</a></1i> 

83 </ul> 


84 </div> 


<div id="qh con5" style="display: none"> 
<ul> 


<1i><a href="#"><span>HTML 部 分 实验 </span></a> 
</1i> 

<1i class="menu line2"></1i> 

<1i><a href="#"><span>CSS 部 分 实验 </span></a> 
</1i> 

<li class="menu line2"></1i> 

<li><a href="#"><span>JavaScript 部 分 实验 </span> 
</a></1i> 


</ul> 


<div id="qh con6" style="display: none"> 
<ul> 


<li><a href="#"><span> 设 计 案 例 1</span></a></1i> 
<li class="menu line2"></1i> 

<1i><a href="#"><span> 设 计 案例 2</span></a></1i> 
<li class="menu line2"></1i> 

<1i><a href="#"><span> 设 计 案 例 3</span></a> 
</1i> 


</ul> 


<div id="qh con7" style="display: none"> 
<ul> 


<li><a href="web exam.html" target= 
"framebody"><span> 综 合 练习 1</span></a></1i> 
<1i class="menu line2"></1i> 

<li><a href="web exam.html" target= 
"framebody"><span> 综 合 练习 2</span></a></1i> 
<1i class="menu line2"></1i> 

<li><a href="web exam.html" target= 


CN 








"framebody"><span> 综 合 练习 3</span></a></1i> 
</ul> 
</div> 
<div id="qh con8" style="display: none"> 
<ul> 
<1i><a href="http://www.w3school.com.cn/ 
html/index.asp" target="framebody"><span>HTML 
教程 </span></a></1i> 
<1i class="menu line2"></1i> 
<li><a href="http://www.w3.0org/TR/2014/REC- 
html5-20141028/" target="framebody"><span> 
HTML5 规 范 </span></a></1i> 
<1i class="menu line2"></1i> 
<1i><a href="http://www.phpl100.com/manual/ 
jquery/" target="framebody"><span> jQuery 在 线 
手册 </span></a></1i> 
</ul> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="main" > 
<div id="leftbar™" class=""> 
<a href="#"><img id="pic" src="images/examplel.png" 
border="0" alt="" onmouseover="pause();"onmouseout= 
"restart ();"></a> 
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128 </div> 
129 <div id="right" class=""> 
130 <iframe name="framebody" src="web first.html" ></iframe> 
131 </div> - 
132 </div> 
133 <!-- 页 面 底部 设计 --> 
134 <div class="bottom"> 
135 <ul> 
136 <1i><strong> 友 情 链 接 : </strong> 
137 <select size=" name="d1" onchange="window.open 
(this.options[this.selectedindex] .value) "> 
138 <option> 中 国名 牌 大 学 </option> 
39 <option value="http://www.tsinghua.edu.cn/"> 清 华 大 学 
</option> 
140 <option value="http://www.pku.edu.cn/"> 北 京 大 学 
</option> 
41 <option value="http://www.fudan.edu.cn/"> 复 旦 大 学 
</option> 
142 <option value="http://www.sjtu.edu.cn/"> 上 海 交 通 大 学 
</option> 
43 <option value="http://www.xjtu.edu.cn/"> 西 安 交 通 大 学 
</option> 
44 </select> 
45 <select size="1"” name="d1l" onchange="window.open (this. 
options[this.selectedindex] .value) "> 
46 <option> 网 络 课程 资源 链接 </option> 
47 <option value="http://www.icourses.cn/home/"> 中 国 mooc 大 学 
</option> 
48 <option value="http://www.jingpinke.com/"> 国 家 精品 课程 共享 
服务 信息 平台 </option> 
49 <option value="http://jpkc.fudan.edu.cn/"> 复 旦 大 学 精品 课程 
</option> 
50 <option value="http://jpkc.nwu.edu.cn/course. 
php#xb_jpkc"> 西 北大 学 精品 课程 建设 网 </option> 
51 <option value="http://www.cncourse.com/portal/ 
indexdefault"> 中 国 高 校 课程 网 </option> 
52 <option value="http://www.intel.com/cn/index.htm"> 中 
国教 育 和 科研 计算 机 网 </option> 
153 </select> 
154 </1i> 
155 < 
156 web 前 端 开发 技术 课程 建设 小 组 2015-2020&copy; 保 留 所 有 权利 , 未 经 允许 不 
得 复制 、 镜 像 </1i> 
E57 </ul> 
158 </div> 
59 </div> 


160 </body> 
161 </html> 


2) 二 级 导航 菜单 切换 显示 qiehuan.js 代码 
/* 切换 菜单 显示 qiehuan.js */ 


function qiehuan (num) { 
for(var id = 0;id<=8;id++){ 
if(id==num) { 
document .getElementById("qh con"+id) .style.display="block"; 
document .getElementById ("mynav"+id) .className="nav_on™; 


Go 必 wN 


哇 } else { 

8 document -getElementById ("qh con"+id) .style.display="none" 7 
9 document .getElementById ("mynav"+id) .className=""; } 

10 上 

11 } 


3) 图 像 切换 switchpicjjs 代码 


/* switchpic.js */ 


// 定 义 全 局 变量 

var CurScreen=1; // 当 前 显示 的 图 像 

var MaxScreen=5; // 最 多 可 切换 图 像 数 

var timer=null; // 定 时 器 变量 

function $ (id) {return document .getElementById(id);} 

function switchPic(){ // 切 换 图 像 函数 ， 定 时 触发 
if (CurScreen==MaxScreen) {CurScreen=1; }else{CurScreent++;} 
// 切 换 图 像 到 最 大 值 时 返回 1 


$ ("pic") .src="images/example"+CurScreen+".png";// 更 换 图 像 的 文件 名 


function reStatrt(){ // 重 新 开始 ， 鼠 标 移出 时 触发 


switchPic () // 切 换 下 一 张 图 
inltt)s // 开 始 定 时 器 
function pause (){ // 和 暂停 切换 ， 鼠 标 悬 停 时 触发 


clearInterval (timer) ; // 清 除 定 时 器 





function init(){ // 初 始 化 函数 ， 在 body 加 载 时 触发 


timer=setInterval ('switchPic();",1000); 
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页 面 CSS 样式 文件 style2menu.css 代码 


/* JS+DIV+CSS 二 级 导航 菜单 style2menu.css */ 
@charset "utf-8"; 
/* 全 局 样式 */ 
*{font-size:12px;color:#666666; 
font-family: "宋体 ",Arial, Helvetica, sans-serif; } 
body{margin:0px auto;padding:0px;text-align:center;} 
#container{width:960px;padding:0 auto;margin:0 auto;} 
img{width:960px;height:160px;} 
/* 主 导航 菜单 */ 
#menu ulf{ 
padding:0; border:0; 
list-style:none; line-height:150%; 
margin-top: 0; margin-right: 0; 
margin-bottom: 0; margin-left: 40px; 
} 
#menu out{ 
width:960px; padding-left:4px; 
margin-left:auto; margin-right:auto; 
background:url ("images/menu left.gif") no-repeat left top; 
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20 overflow:hidden; /* 溢出 部 分 隐藏 */ 

21 } 

22 #menu in{ 

23 background:url ("images/menu right.gif") no-repeat right top; 16 
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padding-right:4px; 


#menu{ 
background:url ("images/menu bg.gif") repeat-x; 
height:73px;width:960px; 


-menu linef 
background:url ("images/menu line.gif") no-repeat center top; 
width:8px; 


-menu line2{ 
background:url ("images/menu line2.gif") no-repeat center top; 
width:15px; 





#nav{ padding-left:20px;width:960px;} 

#nav li{float:left; height:35px;} 

#nav li af 
float:left; display:block; padding-left:6px; 
height:35px;cursor:pointer; text-decoration:none; 
background:url ("images/menu on left.gif") no-repeat left top; 

} 

#nav li a spant{ 
float:left; padding:11lpx 14px 10px 10px; 
line-height:14px;text-decoration:none; 
background:url ("images/menu on right.gif") no-repeat right top; 
font-size:14px; font-weight:bold; Color:#FFFFFF; 


#nav 1i .nav_on{  /* 鼠 标 经 过 时 变换 背景 方便 JS 获 取样 式 */ 
background-position:left 100%; 


#nav 1i .nav_on span{ /* 鼠 标 经 过 时 变换 背景 方便 Js 获 取样 式 */ 
background-position:right 100%; 
color:#333333;text-decoration:none; 

padding:14px 14px 7px 10px; 


/* 子 栏目 */ 
#menu_con{ 
text-align:left; padding-left:20px; clear:both; 


#menu con 1i{ 
float:left; height:22px;margin-top:8px; 


#menu con 1i af 

display:block; float:left; 

background:url ("images/menu on left2.gif") no-repeat left top; 
cursor:pointer; padding-left:3px; 


#menu con li a spanf 
float:left; padding:6px 10px 4px 10px;line-height:12px; 
background:url ("images/menu on right2.gif") no-repeat right top; 


#menu con li a:hovert{ 
text-decoration:none; 
background:url ("images/menu on left2.gif") no-repeat left bottom; 





#menu_con li a:hover span{ 
background:url ("images/menu on right2.gif") no-repeat right bottom; 


81 } 

82 #main{width:960px;height:300px;} 

83 #leftbar{width:298px;height:298px;float:left; 

84 border:1px solid #F1F1F1;} 

85 #leftbar img{width:298px;height:298px;} 

86 #right{width:660px;height:300px;float:left;} 

87 #right iframe{width:660px;height:298px;border:0px;padding:0px;margin: 
Opx;} 

88 .bottom{clear:both;height:80px; 

89 background:#FF9820;text-align:center;padding-top:20px; 

90 color:white;font-size:18px;width:960px; 

91 $ 

92 .bottom ul{list-style:none;color:#FFEEDD;} 


上 述 代 码 中 第 6 行 设置 padding:0px 和 margin:0px auto 可 以 保证 在 不 同 的 浏览 器 中 显 
示 效 果 相 同 ， 因 为 有 些 浏览 器 默认 的 顶部 或 左右 空白 。 第 7 行 设 置 容器 的 样式 ， 可 以 保证 
在 不 同 浏览 器 和 不 同 分 辩 率 的 设备 显示 效果 相同 。 第 9 一 81 行 设置 主导 航 和 二 级 导航 区 的 
样式 ， 其 中 第 20 行 设置 overflow 属性 ， 主 要 解决 正 浏览 器 溢出 部 分 的 显示 问题 。 第 82 一 
87 行 设 置 主体 区 的 样式 。 第 88 一 92 行 设置 版 权 区 的 样式 。 

最 后 利用 MultiBrowser 软件 检测 网 页 在 不 同 浏览 器 中 的 兼容 性 。 通 过 View 打开 所 设 
计 的 Web 前 端 开发 技术 网 络 课程 网 站 , 可 以 看 到 在 Chrome18、 Firefox3.6、 Firefoxl1、 IE7、 
IE8 等 浏览 器 中 网 站 的 显示 效果 相同 ， 如 图 16-19 所 示 。 






Design Compare 1400% ”|D:\WEB_20140505 第 2 版 /教学 案例 及 资源 \ 中 16Vedu_16_4_L,html 






区 知 守 他" 
‘Google Chrome 18 | MozilaFirefox 3.6 》 MozillaFirefox 11 | InternetExplorer7 | InternetExplorer8 | 


Feb 前 阐 开 发 扩 术 Ss 





ey 












首页 课程 前 介 主讲 教师 教学 团队 教学 课件 实验 项 目 课 ; 在 线 测验 网 络 资源 


设计 案例 1 设计 案例 2 设计 夫人 岗 3 















Web 前 端 开发 技术 课程 简介 





一 、 课 程 的 性 质 、 地 位 与 任务 


《Web 前 端 开 发 技术 》《〈 又 名 "Web 客 户 端 编程 "》 课 程 是 计算 机 科学 与 技 
术 、 信 息 管理 与 信息 系统 、 软 件 工程 等 专业 的 一 门 基础 课程 ， 也 是 其 他 计算 机 
相关 专业 的 普及 型 课程 ， 通 过 对 Web 前 端 开 . 注 流 技术 学 习 和 研究 ， 让 学 
生理 解 和 掌握 HTML 语 言 、JavaScript 脚 本 编程 语言 、CSS 等 相关 知识 ， 通 过 实 
验 培养 学 生 Web 站 点 设计 与 开发 的 基本 操作 技术 和 使 用 技巧 。 


二 、 课 程 的 教学 目标 与 基本 要 求 
过 本 课程 革 本 要 求 是 让 学 生理 解 网 页 设计 的 基本 原则 、 栏 目 和 目录 结构 
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图 16-19 网 站 在 多 浏览 器 兼容 性 测试 软件 中 页 面 效果 


DOM BOM 
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本 章 小 结 


本 章 介 绍 了 JavaScript 对 象 的 概念 及 Array、Date、Math、Number、String、Boolean 
等 常用 的 核心 对 象 .通过 大 量 的 示例 讲解 了 在 实际 开发 中 如 何 运 用 这 些 对 象 的 方法 和 属性 。 

HTML 文档 中 的 每 个 标记 都 是 一 个 节点 ， 这 些 标记 之 间 存 在 着 一 定 的 关系 ， 这 种 描述 
页 面 标记 关系 的 树 形 结构 称 为 DOM 节点 树 。 对 于 DOM 节点 的 访问 除了 通过 form 对 象 的 
elements 属性 或 该 节点 的 name 属性 来 访问 外 ， 还 可 以 通过 document 对 象 的 
getElementById()、getElementsByName()、getElementsByTagName() 等 方法 来 访问 ; document 
对 象 应 用 非常 广泛 ， 除 了 访问 节点 外 ， 还 可 以 调用 该 对 象 的 方法 和 属性 来 动态 地 创建 和 修 
改 节点 、 设 置 节点 的 属性 。 

BOM 定义 了 浏览 器 对 象 (window、history、document、location、screen、navigator、 
frame 等 对 象 ) 的 组 成 和 相互 关系 ， 描 述 了 浏览 器 对 象 的 层次 结构 。 在 BOM 中 ， 每 个 对 象 
都 含有 若干 属性 和 方法 ， 使 用 这 些 属性 和 方法 可 以 操作 Web 浏览 器 窗口 中 的 不 同 对 象 ， 控 
制 和 访问 HTML 页 面 中 的 不 同 内 容 。 


练习 与 实验 




















练习 16 


1， 选择 题 

(1) 定义 JavaScript 数组 方法 正确 的 是 〈 入 
A. vararrayList={"cat" , "dog" , "monkey"} 
B. vararrayList =new Array{"cat" , "dog" , "monkey"} 
C. vararrayList =new Array("cat" , "dog" , "monkey") 
D. var arrayList =new Array["cat" , "dog" , "monkey"] 


(2) 利用 下 标 来 访问 数组 时 ， 最 小 下 标 是 从 ) 开始 的 。 


A. 0 B. 1 C. -1 DBD; 2 
(3) 求 3 和 5 中 的 最 小 数 正确 的 函数 是 ( ”)。 
A. Math.min(3,5) B. Math.ceil(3,5) 
C. Math.max(3,5) D. min(3,5) 
(4) 以 下 选项 中 ， 可 以 获得 值 为 false 的 Boolean 对 象 的 是 ( )。 
A. vara=new Boolean(1) B. vara=new Boolean("abc") 
C. vara=new Boolean(true) D. vara=new Boolean() 
(5) 下 列 不 属于 访问 指定 节点 的 方法 的 是 )。 
A. obj.value B. getElementsByTagName() 
C. getElementsByName() D. getElementById() 
(6) 能 够 创建 元 素 节 点 的 方法 的 是 站 
A. createElement() B. getElementById() 


C. getElementByName() D. forms.length 





《7) 下列 代码 分 析 正 确 的 是 ( a 


1 function createNode(){ 

入 var pl=document .createElement ("p"); 

3 Var txt=document . createTextNode ("Hello!™"); 
4 pl.appendChild (txt); 

5 document .appendChild(p); 

6 } 


A. 代码 第 2 行 是 创建 一 个 <p> 元 素 标 记 
B. 代码 第 4 行 是 为 文档 添加 文本 节点 
C. <p> 是 文本 节点 的 子 节点 

D. 函数 的 功能 是 创建 新 的 文本 节点 


(8) 在 告警 消息 框 中 输出 “hello world!” 信 息 正 确 的 是 和 
A. alertBox("hello world!") B. msgBox("hello world!") 
C. alert("hello world!") D. alertMsg("hello world!") 
(9) 下 面 这 两 行 代码 的 功能 是 六 


1 <a herf="javascript:history.back()"></a> 
2 <a herf="javascript:history.forward()"></a> 


A. 代码 第 1 行 的 功能 相当 于 后 退 按钮 
































B. 代码 第 2 行 的 功能 相当 于 后 退 按钮 
C. 代码 第 1 行 的 功能 相当 于 前 进 按钮 
D. 以 上 表述 都 不 正确 
(10) 对 location 对 象 的 href 属性 的 叙述 错误 的 是 5 
A. 可 以 获取 当前 路 径 B. 可 以 改变 当前 路 径 
C. 可 以 用 来 刷新 页 面 D. 是 只 读 属 性 
(11) 使 用 location 对 象 的 〈 ) 方法 可 以 实现 用 新 URL 取代 当前 窗口 的 URL。 
A. load B. onload C. replace D. open 
2. 填空 题 
(1) 可 以 通过 Array 对 象 的 属性 来 获得 数组 的 长 度 。 
(2) 使 用 Math 对 象 的 方法 可 以 获得 0 一 1 之 间 的 随机 数 ， 使 用 Math 对 象 的 
属性 可 以 获得 圆周 率 。 
(3) 在 JavaScript 中 ，Boolean 对 象 只 有 两 种 状态 ， 分 别 是 和 
(4) DOM 是 的 英文 缩写 ， 一 个 最 基本 的 DOM 树 通常 
由 三 种 类 型 的 节点 组 成 ， 分 别 是 和 
(5) document 对 象 中 包含 了 三 个 访问 文档 闻 节点 的 方法 ，i 这 三 个 方法 分 别 是 。 
和 。 
(6) document 对 象 包含 一 些 创 建 和 修改 节点 的 方法 ， 如 可 以 通过 调用 document 对 象 
的 方法 来 创建 一 个 元 素 节 点 ， 通 过 调用 document 对 象 的 





方法 来 删除 一 个 子 节点 ， 通 过 调用 document 对 象 的 





方法 来 添加 一 个 子 节点 。 





DOM 无 BOM 
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(7) 使 用 document 对 象 和 属性 可 以 获取 节点 的 内 容 。 
(8) 浏览 器 对 象 模型 (BOM) 主要 包含 
、frame 和 document 共 七 个 对 象 ， 对 象 是 最 顶层 对 象 。 
(9) 在 实际 的 开发 中 , 使 用 window 对 象 的 方法 可 以 产生 确认 框 , 使 用 window 
对 象 的 方法 可 以 产生 告警 框 ， 使 用 window 对 象 的 方法 可 以 产生 提示 框 。 
(10) 对 象 用 于 获取 用 户 浏览 器 的 相关 信息 。 
3. 简 答 题 


(1) 什么 是 document 对 象 ? 如 何 获取 文档 对 象 上 的 元 素 ? 

(2) 什么 是 浏览 器 对 象 模型 ? 它 包含 哪些 对 象 ? 

(3) 简 述 window 对 象 有 哪些 常用 的 属性 和 方法 。 
实验 16 

1. 设计 模拟 幸运 数字 机 游戏 。 设 幸运 数字 为 8， 每 次 由 计算 机 随机 生成 三 个 1 一 9 之 
间 的 随机 数 ， 当 这 三 个 随机 数 中 有 一 个 数字 为 8 时 ， 就 算 赢 了 一 次 ， 如 图 16-20 所 示 。 
re .0 | 来 自 网 页 的 消 ai 


@: 


输 
您 累计 玩 了 1 次 赢 了 0 次 ， 胜 弯 0%6 继续 吗 ? 



















































[ 确定 ] 攻 开 
图 16-20 幸运 数字 机 游戏 页 面 
2. 按 如 图 16-21 所 示 的 布局 ， 完 成 下 列 功能 : 





Ka wi B prox 


随机 产生 20 个 4 位 整数 分别 如 下 : 
4647,2017, 4909, 3278, 4981, 9646, 8619, 4159, 2429, 4205 
14982,5441,1439, 2865,1112,8599, 3376, 5515, 8913, 527 


4 
从 小 到 大 排序 后 结果 为 : 

1112,1439, 2017, 2429, 2865, 3278, 3376, 4159, 4205, 4647 
14909, 4981, 4982, 5274, 5441, 5515,8599, 8619, 8913, 964 


6 
‖ 能 被 整除 的 整数 有 : 
2865,4205,5515 
































图 16-21 随机 产生 批量 整数 、 排 序 、 找 特征 数 


(1) 单 击 “ 随 机 产生 20 个 整数 ”按钮 时 , 能 够 随机 产生 20 个 4 位 整数 (1000 一 9999)， 
并 将 产生 的 20 个 整数 写 入 到 数组 中 ， 将 其 从 小 到 大 进行 排序 ， 输 出 在 多 行文 本 框 中 ; 

(2) 单 击 “ 找 出 能 被 5 整除 的 整数 ”按钮 时 ， 从 产生 的 20 个 随机 整数 中 找 出 能 够 被 5 
整除 的 整数 ， 并 在 多 行文 本 框 中 输出 ; 

(3) 单 击 “ 重 置 ” 按 钮 时 ， 将 多 行文 本 框 中 的 所 有 内 容 清空 。 








第 17 章 HTML5 高 级 应 用 





本 章 学 习 目 标 


HTMLS5 高 级 应 用 主要 涉及 需要 借助 于 JavaScript 脚本 才能 实现 的 功能 ， 例 如 Web 存 
储 、 画 布 Canvas、 拖 放 、Web Worker 等 。 学 会 利用 这 些 新 特性 解决 实际 工程 中 应 用 问题 ， 
提高 Web 页 面 的 用 户 体 验 度 ， 改 善 交互 界面 。 

Web 前 端 开发 工程 师 应 掌握 以 下 内 容 : 

。 学 会 使 用 Web 本 地 存储 对 象 解决 客户 端 数据 存储 问题 。 

。 掌握 Canvas 基本 语法 和 学 会 绘制 各 种 图 形 、 文 字 及 图 像 。 

。 学 会 使 用 Web 拖 放 技术 解决 简单 的 实际 应 用 问题 。 

。 理解 Web Worker 多 线程 工作 原理 ， 学 会 使 用 多 线程 解决 简单 的 实际 应 用 问题 。 


17.1 HTMLS Web Storage 


HIML5 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 ， 分 别 是 持久 化 的 数据 存储 
localStorage、 会 话 式 的 数据 存储 sessionStorage。HTMLS5 之 前 客户 端 数据 存储 是 由 cookie 
完成 的 ， 由 于 cookie 不 能 存储 大 量 数 据 ， 需 要 通过 服务 器 的 请 求 来 传递 ， 往 往 造成 cookie 
响应 速度 慢 、 效 率 低 。 在 HTML5 中 ， 数 据 不 需要 由 每 个 服务 器 进行 请 求 传 递 ， 只 需 在 有 
请 求 时 使 用 数据 ， 这 样 就 不 会 影响 网 站 的 性 能 ， 而 且 能 够 存储 大 量 数据 。 数 据 通常 以 键 值 
对 (key-value pair) 形 式 存 在 ，Web 网 页 的 数据 只 允许 该 网 页 访问 使 用 。 


17.1.1 localStorage 对 象 


localStorage 对 象 存储 的 数据 没有 时 间 限制 , 所 以 称 为 持久 化 存储 , 数据 存储 长 期 可 用 。 
使 用 此 类 对 象 之 前 ， 最 好 先 检查 一 下 浏览 器 是 否 支 持 。 检 查 代码 如 下 : 

if(typeof (Storage) !=="undefined") { 

// 是 的 ! 支持 localStorage sessionStorage 对 象 ! // 一 些 代码 ...} 

else { // 抱 歉 ! 不 支持 web 存 储 。 } 

localStorage 对 象 和 sessionStorage 对 象 具有 同样 的 方法 ， 仅 仅 是 对 象 名 称 不 同 而 已 。 
下 面 列 出 localStorage 对 象 的 常用 方法 。 

e localStorage.setItem(key,value): 保存 数据 。 

。 localStorage.getItem(key): 读 取 数据 。 

。 localStorage TemoveItem(key): 删除 单个 数据 。 

。 localStorage.clear(): 删除 所 有 数据 。 
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。 localStorage key(index): 得 到 某 个 索引 的 key。 
【 例 17-1-1】localStorage 对 象 的 应 用 。 代 码 如 下 ， 页 面 效果 如 图 17-1 所 示 。 


1 <!-- edu 17 1 1.html --> 
2 <!DOCTYPE html> 


















3 <html> 
4 <head> 回 YH 
5 <meta charset="UTF-8"> 
6 <title>localStorage 对 象 的 应 用 </title> 视频 讲解 
7 <style type="text/css"> 
8 div{text-align:center;padding:20px;border:10px ridge 
#005A9C;width:350px;height:250px;margin:0 auto;} 
9 </style> 
0 </head> 
1 <body> 
2 <div> 
3 <h3> 最 可 爱 的 人 评选 </h3> 
4 <img src="45567.jpg" width="80" height="80" border="0" 
5 <p id="result"></p> 
6 <p> 刷 新 页 面 票数 会 增长 。</p> 
了 <p> 请 关闭 浏览 器 后 重 试 仍 会 增长 </p> 
8 </div> 
9 <script type="text/javascript"> 
20 var tickets=0; 
21 localStorage.setItem(tickets, 0); 
2 if (localStorage.tickets){ 
23 localStorage.tickets=parseInt (localStorage.tickets) 
#1 } 
24 else localStorage.tickets=1; } 
和 25 document .getElementById ("result") .innerHTML=" 已 投 : m+ 
localStorage.tickets + " 票 "; 
26 </script> 
2 </body> 
28 </html> 
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图 17-1 HTML5 localStorage 对 象 的 应 用 


17.1.2 ”sessionStorage 对 象 


sessionStorage 对 象 针 对 一 个 session 进行 数据 存储 。 数 据 存储 周期 短 ， 当 用 户 关闭 浏 
览 器 窗口 后 ， 数 据 会 被 删除 。 该 对 象 的 方法 与 localStorage 对 象 方法 相同 。 
【 例 17-1-2】localStorage 对 象 实现 的 简易 通讯 录 。 代 码 如 下 ， 页 面 效 果 如 图 17-2 所 示 。 
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通讯 采 添加 通讯 录 吉 词 与 册 除 
a 输入 姓 名: 区 XR 一 
电话 (value) : | ] 电话 : [699 的 99 
[EYEEIELTE 

















| 未 加 通 h 录 | 重 轨 
姓名 电话 








储 久 良 --- 13599999999 
张大 为 --- 13591111111 
王 夺 一 --- 18912341234 


Le = 
图 17-2 ”localStorage 对 象 实现 的 简易 通讯 录 


1 <!-- edu 17 1 2.html --> 
2 <!DOCTYPE htmI> 




















3 <html> 

4 <head> 

和 <meta charset="UTF-8"> 

6 <title>localStorage 对 象 的 API 综 合 应 用 </title> 

时 <script> 

8 // 载 入 所 有 存储 在 localStorage 的 通讯 录 信 息 

9 loadAllInfo(); 

10 / /保存 一 条 通讯 记录 数据 ， 同 时 显示 在 div 中 

FE function $(id){return document .getElementById(id);} 
2 function saveInfo(){ 

FE var namel=$ ("username") .value; // 取 姓名 

14 var phonel=$ ("userphone") .value; // 取 电话 

15 if (namel!="" && phonel!="") // 不 为 空 处 理 
16 { 

Fy localStorage.setItem(namel, phonel); 

18 loadAllInfo(); 

19 alert ("添加 成 功 "); 

20 }else{ // 姓 名 或 电话 为 空 ， 告 警 并 获得 焦点 
21 alert ("请 输入 姓名 和 电话 ! "); 

22 $ ("username") .focus () 7 

23 } 

24 } 

25 // 以 姓名 查找 通讯 录 信息 

26 function findForName(){ 

a var searchname = $ ("search name") .value; 

28 var searchphone = localStorage.getItem(searchname); // 取 电话 
29 $ ("userphonel") .value=searchphone; // 填 充电 话 
30 } 

31 // 从 localstorage 中 取出 所 有 通讯 录 中 信息 ， 并 展现 到 界面 上 

32 function loadAllInfo(){ 

33 //localStorage.clear (); 

34 Var result = ""; 

35 if(localSstorage.length>0){ 

36 result += "姓名 电话 </br><hr>"; 

37 for (var i=0;i<localStorage.length;i++){ 

38 Var name= localStorage.key (i); 

39 Var phone = localStorage.getItem(name); 
40 result += name+" --—- "+phone+"</br>"; 
41 } 
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42 $ ("displayallinfo") .innerHTML = result; 

43 }elsef{ 

44 $ ("displayallinfo") .innerHTML = "数据 为 空 .…."; 

45 } 

46 } 

47 / /删除 某 一 条 通讯 信息 

48 function deleteName (){ 

49 localStorage.removeItem($ ("search name") .value); // 取 电话 
50 $ ("search name") .value=""; // 填 充电 话 
5 loadAllInfo(); 

52 } 

53 </script> 


54 </head> 
55 <body> 


56 <fieldset style="float:left;width:300px;text-align:center;"> 

57 <legend> 通 讯 录 添加 </legend><label for="name"> 姓 名 (key) : 
</label> 

58 <input type="text" id="username" name="username" required/> 
<br/> 

59 <label for="telphone"> 电 话 (value): </label> 

60 <input type="text" id="userphone" name="userphone" required/> 
<br/> 

61 <br><input type="button" onclick="saveInfo () " value=" 添 加 通讯 
录 "/> 

62 <input type="reset"> 

63 <div id="displayallinfo" name="displayallinfo"></div> 

64 </fieldset> 

65 <fieldset style="float:left;width:300px;height:100px;text-— 

align:center;"> 

66 <legend> 通 讯 录 查 询 与 删除 </legend> 

67 <label for="search_phone"> 输 入 姓名 : </label> 

68 <input type="text" id="search name" name="search name" required/> 

<br> 
69 <label1> 电 话 : </label><input type="text" name="" jd="userphonel" 
readonly> 

70 <br><input type="button" onclick="findForName () " value=" 查 
找 通讯 录 "/> 

71 <input type="button" onclick="deleteName()"” value=" 删 除 通 讯 
录 "/> 

72 </fieldset> 

3 了 3 </body> 

74 </html> 


17.1.3 ”浏览 器 端 数 据 库 IndexedDB 


简单 来 说 ，IndexedDB 是 一 种 轻 量 级 NoSQL (Not Only SQL, 泛 指 非 关 系 型 ) 数据 库 ， 
用 来 持久 化 大 量 (250MB ) 客户 端 数据 。 它 可 以 让 Web 应 用 程序 具有 非常 强大 的 查询 能 
且 可 以 离线 工作 。IndexedDB 的 数据 操作 直接 使 用 JS 脚本 ， 不 依赖 SQL 语句 〈 最 初 的 
Web SQL 数据 库 已 被 废弃 )， 操 作 返 回 均 采 用 异步 。 而 localStorage 和 sessionStorage 对 象 
是 采用 同步 技术 实现 少量 (2.5 一 10MB ) 客户 端 数据 (字符 串 ) 存储 。 一 个 网 站 可 能 有 一 
个 或 多 个 IndexedDB 数据 库 ， 每 个 数据 库 必 须 具 有 唯一 的 名 称 。WebStorage 可 以 用 来 存储 
键 值 对 〈key-value pair)， 然 而 它 无 法 提供 按 顺 序 检 索 、 高 性 能 地 按 值 查 询 或 存储 重复 的 键 
的 功能 。 




















使 用 IndexedDB 的 基本 步骤 如 下 所 示 : 


。 打开 数据 库 并 且 开始 一 个 事务 。 
。 创建 一 个 对 象 仓 库 (Object Store)。 


。 构建 一 个 请 求 来 执行 一 些 数据 库 操作 ， 例 如 增加 或 提取 数据 等 。 
。 通过 监听 正确 类 型 的 DOM 事件 以 等 待 操作 完成 。 


。 在 操作 结果 上 进行 一 些 操作 (可 以 在 request 对 象 中 找到 )。 


1. 浏览 器 支持 IndexedDB 数据 库 情况 判断 





由 于 IndexedDB 的 规范 尚未 最 终 定稿 ， 不 同 的 浏览 器 厂商 使 用 不 同 的 浏览 器 前 组 实现 


IndexedDB API， 例 如 基于 Gecko 内 核 的 浏览 器 使 用 moz 前 级 , 基于 WebKit 内 核 的 浏览 器 


使 用 webkit 前 级 。 为 了 能 够 支持 多 种 厂家 的 浏览 


浏览 器 是 否 支 持 IndexedDB 数据 库 。 代 码 如 下 所 示 : 


var indexedDB=window.indexedDB || window.mozIndexedDB || 


window.webkitIndexedDB; 
if (window.indexedDB){ 


// 获 得 IndexedDB 对 象 


alert (" 您 的 浏览 器 支持 IndexedDB 数 据 库 。") ; 


}elsel{ 


alert ("您 的 浏览 器 不 支持 IndexedDB 数 据 库 。") ; 


} 
2. 数据 库 创 建 与 打开 


， 建 议 采 用 window.indexedDB 来 判断 


使 用 window.indexedDB.open(DBName, DBVersion) 来 打开 数据 库 。 语 法 如 下 : 


var request=window.indexedDB .open (DBName, DBVersion); 


// 数 据 库存 在 打开 它 ; 否则 创建 


若 DBName 数据 库 创建 之 前 并 不 存在 ， 则 会 调用 onupgradeneeded 接口 ， 在 这 个 函数 
中 可 以 进行 数据 库 初 始 化 和 创建 索引 。 
【 例 17-1-3】 创 建 名 为 myBooks 的 数据 库 ， 并 创建 名 为 books (ObjectStore 相当 于 表 ) 
的 数据 仓库 ， 为 数据 仓库 添加 两 个 对 象 〈 两 本 图 书 ) 数据 。 代 码 如 下 所 示 ， 数 据 库 和 对 象 


仓库 建立 情况 如 图 17-3 所 示 。 
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图 17-3 ”创建 myBooks 数据 库 和 books 对 象 仓库 的 结构 图 


var request=window.indexedDB.open ("myBooks",1); 
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// 数 据 库存 在 ， 则 打开 它 ; 否则 创建 

request .onerror = function (event) { // 捕 获 连 接 失 败 事件 ， 并 处 理 

alert ("数据 库 连接 失败 : "+event .target .errorCode) // 提 示 错 误 信息 
} 
request .onupgradeneeded = function(event) { 

// 当 此 数据 库 创 建 前 不 存在 时 ， 进 行 初始 化 

var db = request.result; 

Var store = db.createObjectStore ("books", {keyPath: "isbn"}); 

var titleIndex = store.createIndex ("by title", "title", {unique: 

true}); // 标 题 索引 

var authorIndex = store.createIndex ("by author", "mauthor") ;// 作 者 索引 

// 填 入 初始 值 ， 添 加 2 本 书信 息 


store.put ({title:" 计 算 机 组 成 原理 (修订 版 )", author:" 张 功 营 "，isbn: 
"9787302433637"}); 


store.put ({title:"Java 2 实用 教程 (第 5 版 )"，author: " 耿 祥 义 "，isbn: 
"9787302464259 "}); 
J = function(event) { // 捕 获 连 接 成 功 事件 ， 并 处 理 
db=event.target.result;  // 连 接 成 功 时 ,获取 数据 库 对 象 (也 可 用 request .result) 
i alert ("数据 库 连接 成 功 "); 
在 连接 到 数据 库 后 ，request 会 监听 三 种 状态 。 
。 success: 打开 或 创建 数据 库 成功 后 绑 定 指定 函数 。 
。 error: 打开 或 创建 数据 库 失 败 后 绑 定 指定 函数 。 
。 upgradeneeded: 更 新 数据 库 后 绑 定 指定 函数 。 
upgradeneeded 状态 是 在 indexedDB 创建 新 的 数据 库 时 和 indexedDB.open (DBName， 
DBVersion) DBVersion 〈 数 据 库 版 本 号 ) 发 生变 化 时 才能 监听 到 此 状态 。 当 版 本 号 不 发 生 
变化 时 ， 不 会 触发 此 状态 。 数 据 库 的 ObjectStore 的 创建 、 删 除 等 都 是 在 这 个 监听 事件 下 执 
行 的 。 
需要 注意 的 有 两 点 : 
(1) 当 数 据 库 连接 时 ，open() 方 法 返回 一 个 IDBOpenDBRequest 对 象 ， 调 用 函数 定义 
在 这 个 对 象 上 。 
(2) 在 连接 建立 成 功 时 ， 会 触发 onsuccess 事件 ， 调 用 函数 接收 一 个 事件 对 象 event 作 
为 参数 ， 其 targetresult 属性 指向 打开 的 IndexedDB 数据 库 。 也 可 以 使 用 监听 器 来 捕获 3 个 
事件 ， 分 别 为 success、error、upgradeneeded。 可 以 通过 下 列 方法 为 页 面 元 素 (对 象 ) 添加 
事件 监听 器 。 代 码 如 下 所 示 : 


element .addEventListener (event, function, useCapture); 


代码 中 addEventListener() 方 法 有 三 个 参数 。 第 1 个 参数 为 event, 为 某 元 素 指定 监听 事 
件 名 称 , 如 success、click 等 , 而 不 是 onsuccess、onclick 等 事件 句柄 。 第 2 个 参数 为 function, 
为 某 个 事件 绑 定 (指派 ) 事件 处 理 函 数 。 第 3 个 参数 useCapture， 可 选 ， 布 尔 值 ， 指 定 事 
件 是 否 在 捕获 或 冒 泡 阶段 执行 。 其 值 为 tue 表示 事件 句柄 在 捕获 阶段 执行 ; 默认 值 为 false 
表示 事件 句柄 在 冒 泡 阶段 执行 。 





indexedDB 对 象 的 Open() 方 法 需要 监听 的 事件 代码 如 下 所 示 : 


request.addEventListener('success'，function (event){ // 打 开 或 创建 数据 库 成 功 


1 false)s // 第 3 个 参数 为 false :表示 在 冒 泡 阶段 执行 
request.addEventListener('error'，function (event){ // 打 开 或 创建 数据 库 失 败 
下 号 下 SS // 第 3 个 参数 为 false: 表 示 在 冒 泡 阶 段 执行 
Lequest .addEventListener('upgradeneeded', function(event){ 

// 更 新 数据 库 时 执行 
}, false); // 第 3 个 参数 为 false :表示 在 冒 泡 阶段 执行 


3. 创建 与 删除 ObjectStore 

ObjectStore( 对 象 仓库 , 又 称 对 象 存储 空间 ) 是 IndexedDB 数据 库 的 基础 , 在 IndexedDB 
中 并 没有 关系 型 数据 库 中 的 表 , 而 是 使 用 对 象 仓 库 (相当 于 关系 型 数据 库 的 表 ) 来 存储 数据 。 

1) createObjectStore() 方 法 创建 对 象 仓库 


var store=db .createObjectStore (storeName, {keyPath: primaryKey, 
autoIncrement: true1false});//keyPath 称 为 键 路 径 ， 作 为 ObjectStore 的 搜索 关键 字 


例如 ， 创 建 一 个 books 对 象 仓 库 ，keyPath 为 isbn 〈 书 号 )。 代 码 如 下 所 示 : 
var store = db.createObjectStore("books", {keyPath:"isbn"}); 
2) deleteObjectStore() 方 法 删除 对 象 仓库 


db.deleteObjectStore (objectStoreName) ; // 基 本 语法 
db.deleteObjectStore ("books"); // 举 例 -删除 books 对 象 仓库 


3) createIndex() 方 法 为 对 象 仓 库 创 建 索引 

var indexName=store.createIndex (index name, index key, {unique: 

truelfalse}); 

代码 中 参数 index_name 是 索引 名 称 ， 例 如 by_title 表示 按 标题 建立 索引 ; index_key 
是 索引 键 值 名 称 ，{unique:truelfalse} 是 可 选项 ， 表 示 是 否 唯 一 。true: 唯一 ，false: 不 唯一 。 

【 例 17-1-4】 为 books 对 象 仓库 按 标 题 (title) 和 作者 (authoD 建 立 索 引 。 代 码 如 下 所 示 : 


var titleIndex = store.createIndex("by title", "title", {unique:false}); 


// 标 题 索引 
var authorIndex = store.createIndex ("by author", "author"); // 作 者 索引 
4) objectStoreNames 属性 检查 对 象 仓库 是 否 存在 
objectStoreNames 属性 返回 一 个 DOMStringList 对 象 , 里 面包 含 了 当前 数据 库 所 有 “对 
象 仓 库 ” 的 名 称 。 可 以 使 用 DOMStringList 对 象 的 contains 方法 ， 检 查 数据 库 是 否 包 含 某 
个 “对 象 仓库 ”。 代 码 格式 如 下 : 


if(!dqb .obJjectStoreNames .contains ("books")) { /7 判断 某 个 对 象 仓库 是 否 存在 
db.createObjectSstore ("books"); // 不 存在 则 创建 该 对 象 仓库 








4. 使 用 事务 
需要 使 用 事务 在 对 象 存储 上 执行 所 有 读 取 和 写 入 操作 。 类 似 于 关系 型 数据 库 中 事务 的 
工作 原理 ，IndexedDB 事务 提供 了 数据 库 写 入 操作 的 一 个 原子 集合 ， 这 个 集合 要 么 完全 提 
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交 ， 要 么 完全 不 提交 。IndexedDB 事务 还 拥有 数据 库 操作 的 一 个 中 止 和 提交 工具 。 

1) IndexedDB 中 的 事务 模式 

。 readonly: 提供 对 某 个 对 象 存储 的 只 读 访 问 ， 在 查询 对 象 存储 时 使 用 。 

。 readwrite: 提供 对 某 个 对 象 存储 的 读 取 和 写 入 访问 权 。 

。 versionchange: 提供 读 取 和 写 入 访问 权 来 修改 对 象 存储 定义 ， 或 者 创建 一 个 新 的 对 

默认 的 事务 模式 为 readonly。 可 在 任何 给 定时 刻 打开 多 个 并 发 的 readonly 事务 ， 但 只 
打开 一 个 readwrite 事务 。 因 此 ， 只 有 在 数据 更 新 时 才 考 虑 使 用 readwrite 事务 。 单 独 的 
(表示 不 能 打开 任何 其 他 并 发 事务 ) versionchange 事务 操作 一 个 数据 库 或 对 象 存储 。 可 以 
在 onupgradeneeded 事件 处 理 函 数 中 使 用 versionchange 事务 创建 、 修 改 或 删除 一 个 对 象 存 
储 ， 或 者 将 一 个 索引 添加 到 对 象 存 储 。 

2) 创建 事务 的 基本 语法 

var transaction = db.transaction (storeName， [transactionmode]) ;// 基 本 语法 

var objectStore =transaction.objectStore (storeName);  // 获 取 指定 的 对 象 仓库 


其 中 db 为 已 连接 的 数据 库 对 象 ，storeName 为 对 象 仓 库 列 表 ， 列 表 是 由 多 个 对 象 仓库 
组 成 的 字符 串 数 组 ,不 同 的 对 象 仓库 名 之 间 用 去 号 分 隔 。 例 如 ["students", "teachers"] 表 示 同 
时 为 两 个 对 象 仓 库 创 建 一 个 事务 。[transactionmode] 为 可 选项 ， 取 值 可 以 为 readonly、 
TIeadwrite、versionchange。 不 设置 此 参数 默认 为 只 读 。transaction() 方 法 返回 一 个 事务 对 象 ， 
该 对 象 的 objectStore() 方 法 用 于 获取 指定 的 对 象 仓库 。 

【 例 17-1-S】 为 books、press 对 象 仓 库 创建 一 个 读 写 事务 。 代 码 如 下 所 示 : 

var transactionl= db.transaction ("books"，"readwrite") 7 

// 为 一 个 对 象 创建 一 个 读 写 事务 
var transaction2= db.transaction(["books","press"],"readwrite"); 
// 为 两 个 对 象 库 创 建 一 个 读 写 事务 

var objectStore=transaction1l.objectStore ("books "); // 获 取 books 对 象 仓库 

3 ) transaction() 方 法 的 事件 类 型 

该 方法 有 三 种 事件 ， 分 别 是 中 断 、 完 成 和 错误 。 

。 abort: 事务 中 断 。 

。 complete: 事务 完成 。 

。 error: 事务 出 错 。 

事件 处 理 代 码 结 构 如 下 所 示 : 


Var transaction = db.transaction(["books"], "readonly"); 
transaction.oncomplete = function (event) { 
console.1o0g ("数据 添加 成 功 ! ") ; //alert ("数据 保存 成 功 ! ") ; 
}; 
transaction.onerror = function(event) { 
console.log("Error",e.target .error.name); 


// 错 误 处 理 


y 








}; 

transaction.onabort = function (event) { 
alert ("数据 保存 失败 ! ") ; 

}; 


S. 数据 库 的 增删 改 查 

数据 库 的 增加 、 更 新 、 删 除 和 读 取 都 会 触发 两 个 事件 ， 分 别 是 success( 检 索 请 求 成 功 ) 
和 error( 检 索 请 求 失败 )， 所 以 编程 时 需要 为 它们 指派 事件 处 理 函 数 。 

1) 存储 数据 准备 

给 books 对 象 仓库 定义 三 个 对 象 存放 在 booklists 数组 中 。 其 中 每 对 个 中 定义 一 个 对 象 ， 
每 个 对 象 之 间 用 逗号 分 隔 ， 准 备 写 入 到 对 和 象 仓库 中 。 代 码 如 下 所 示 : 


var booklists=[{title:"Web 前 端 开发 技术 -Html、Css、 JavaSscript",author: " 储 久 
良 ", isbn: "9787302431695"}, {title:" 计 算 机 组 成 原理 (修订 版 )"，author:" 张 功 营 "， 
isbn: "9787302433637"}, {title:"Java 2 实用 教程 (第 5 版 )"，author:" 耿 祥 义 "， 
isbn:"9787302464259 "}]; 


2) 数据 库 的 增加 、 更 新 、 删 除 


objectStore.add (objectName) // 添 加 数据 ， 当 关键 字 存 在 时 数据 不 会 添加 
objectStore.put (objectName); 

// 更 新 数据 ， 当 关键 字 存 在 时 覆盖 数据 ， 不 存在 时 会 添加 数据 
objectStore.delete (value); // 删 除数 据 ， 删 除 指定 的 关键 字 对 应 的 数据 
objectSstore.clear (); // 清 除 objectstore 


3) 数据 库 的 数据 读 取 


var request = objectStore.get (value); // 查 找 数据 ， 根 据 关 键 字 查 找 指定 的 数据 
。 常用 方式 。 分 配 事 件 句 柄 ， 并 绑 定 事件 处 理 函 数 。 
request .onsuccess=function(e){ 
Var books=e.target.result; 
console.log (books.title); // 控 制 台 输出 图 书 的 标题 
}; 
request .onerror=function (e){ 
console.1og ("数据 读 取 失 败 ! ") ; // 控 制 台 输出 图 书 的 标题 
}; 


。 事件 监听 方式 。 分 配 事件 句柄 ， 并 绑 定 事件 处 理 函 数 。 


request .addqEventListener('success'，function (event)1{ // 增 加 事件 监听 器 
// 异 步 查找 后 的 调用 函数 ， 省 略 

}, false); 

request .addEventListener('error', function(event){ // 增 加 事件 监听 器 
// 错 误 处 理 函数 ， 省 略 

}, false); 


【 例 17-1-6】 将 已 定义 的 三 个 对 象 添加 到 books 对 象 仓库 中 。 代 码 如 下 所 示 : 


for (var i=0 ; i<booklists.length;i++) {// 采 用 for 循 环 将 三 个 对 象 添加 到 指定 对 象 仓库 
request=objectSstore.add (booklists[i]); 
// 添 加 对 象 到 books 中 ， 也 可 以 用 put () 方 法 
Lequest .onerLror = function(){ 
console.error (" 数 据 库 中 已 有 该 对 象 , 不 能 重复 添加 !! ") 第 
] 
request .onsuccess=function ()1{ // 控 制 台 输出 或 某 个 HTML 标 记 内 输出 17 
console. 1og (" 对 象 已 成 功 存 入 对 象 仓库 中 ! ') 
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6. 遍历 数据 openCursor0 方 法 

使 用 对 象 仓库 的 openCursor() 方 法 可 以 实现 遍历 数据 。 该 方法 可 以 获取 游标 对 象 ， 然 
后 利用 游标 移动 来 实现 数据 遍历 .openCursor() 方 法 还 可 以 接受 第 二 个 参数 , 表示 遍历 方向 ， 
默认 值 为 next， 其 他 值 为 prev、nextunique 和 prevunique。 后 两 个 值 表 示 如 果 遇 到 重复 值 ， 
会 自动 跳 过 。openCursor() 方 法 是 异步 执行 的 ， 有 两 个 事件 分 别 是 success〈 检 索 请 求 成 功 ) 
和 eror (检索 请 求 失败 )， 可 以 为 它们 指派 事件 处 理 函 数 。 

1) 非 索引 查找 

【 例 17-1-7】 不 使 用 索引 ， 直 接 使 用 游标 遍历 数据 。 代 码 如 下 所 示 : 


var tx=db.transaction(["books"]，"readonly"); // 创 建 事 件 对 象 
var objectStore=tx.objectStore ("books"); // 利 用 事务 对 象 获取 指定 的 对 象 仓库 





var cursor=objectStore.openCursor (); // 通 过 对 象 仓库 打开 游标 
cursor.onsuccess=function(e){ 
var result=e.target.result; // 获 取 结 果 集 
if (result) { // 条 件 成 立时 , 控制 台 输出 或 某 个 HTML 标 记 内 输出 信息 
console.log("key", result.key); // 输 出 键 名 ， 如 isbn 
console.dir("data"，result.value);  // 列 出 该 对 象 所 有 属性 和 方法 
result .continue(); // 游 标 移 到 下 一 个 数据 对 象 上 
jelsef 


Sn eo Wh 
ey onerror=function(e)f{ 
console.1og ("没有 数据 可 遍历 ! ") ; 
}; 

代码 中 事件 处 理 函 数 的 参数 为 事件 对 象 ， 该 对 象 的 targetresult 属性 指向 当前 数据 对 
象 。 当 前 数据 对 象 的 key 和 value 分 别 返 回 键 名 和 键 值 ( 即 实际 存 入 的 数据 )。continueO 
方法 将 光标 移 到 下 一 个 数据 对 象 ， 如 果 当 前 数据 对 象 已 经 是 最 后 一 个 数据 了 ， 则 光标 指向 
null。 

编程 时 可 以 采用 consolelog0 方 法 来 取代 alert0 或 documentwrite0 方 法 。 采 用 
console.dir0 可 以 显示 一 个 对 象 所 有 的 属性 和 方法 。 

2) IDBKeyRange 对 象 

通过 索引 可 以 读 取 指 定 范围 内 的 数据 。 使 用 浏览 器 原生 的 IDBKeyRange 对 象 能 够 生成 
指定 范围 的 range 对 象 。 生 成 方法 有 四 种 。 

。 lowerBound() 方 法 : 指定 范围 的 下 限 。 

。 upperBound() 方 法 : 指定 范围 的 上 限 。 

。 bound0 方 法 : 指定 范围 的 上 下 限 。 

。 only( 方 法 : 指定 范围 中 只 有 一 个 值 。 

【 例 17-1-8】 使 用 IDBKeyRange 对 象 生 成 range 对 象 的 各 种 情形 。 代 码 如 下 所 示 : 


var rangel=IDBKeyRange.upperBound (x) //All keys < x 


Var range2=IDBKeyRange.upperBound (x, true); //All keys < x 
var range3=IDBKeyRange.lowerBound(y); //All keys 二 Y 


var range4=IDBKeyRange.lowerBound(y, true); // All keys > Y 
var range5=IDBKeyRange .bound (x, y); // x All keys < y 
Var range6=IDBKeyRange.bound(x, y, true, true); // x <All keys < Y 
Var range7=IDBKeyRange.bound(x, y, true, false); // x< All keys < y 
var range8=IDBKeyRange.bound(x, y, false, true); // x <All keys <y 
var range9=IDBKeyRange.only (z); // The key = z 


代码 中 参数 为 true 表示 某 个 界限 值 为 开 区 间 ; false 表示 某 个 界限 值 为 闭 区 间 。 如 果 有 
两 个 参数 为 逻辑 值 ， 分 别 表示 下 限 值 、 上 限 值 为 开 区 间或 闭 区 间 。 

3) 按 索引 查找 数据 

使 用 对 象 仓 库 的 mdex() 方 法 来 实现 检索 。 代 码 如 下 所 示 : 

var index=objectStore.index (indexName) ; //indexName 为 已 建立 的 索引 名 称 

var cursor=index.openCursor (range) // 用 IDBKeyRange 生 成 范围 range 

cursor.addEventListener('success', function(event){ // 启 动 成 功 监听 


var result = event.target.result;  // 返 回 检索 结果 集 
if(result){ 





console.log(result.value); // 输 出 数据 
result .continue () ; // 迭 代 ， 游 标 下 移 
} 
}, false); 
cursor.addEventListener('error', function(event) {console.1o0g(" 失 败 ! "); 
},false); 


按 索引 的 范围 查找 数据 时 需要 定义 range 范围 。 当 range 为 null 时 ， 查 找 所 有 数据 ; 
当 range 为 指定 值 时 ,查找 索引 满足 该 条 件 对 应 的 数据 ， 当 range 为 IDBKeyRange 对 象 时 ， 
根据 条 件 查找 满足 条 件 的 指定 范围 的 数据 。 

【 例 17-1-9】 按 姓名 的 开始 字母 范围 B 一 D) 来 检索 数据 。 部 分 代码 如 下 所 示 ; 


var person = { // 定 义 对 象 
name:name, 
email:email, 
created:new Date () 


var transaction=db.transaction(["people"],"readonly"); 

// 为 people 定 义 只 读 事件 
var objectStore= transaction.objectStore ("people") ;// 获 取 people 对 象 仓库 
var index= obJjectStore.index ("name") // 按 姓名 进行 索引 
var range=IDBKeyRange.bound('B', 'D'); // 生 成 范围 range 对 象 
index.openCursor (range) .onsuccess=function (e){ 


// 打 开 索 引 游标 ， 启 动 成 功 监听 事件 


var cursor=e.target.result; // 获 取 结 果 集 
if(cursor){ // 通 过 控制 台 输 出 相关 信息 
console.log(cursor.key + ":"); 


for (var field in cursor.value) { 
console.log(cursor.value[field]); 
} 
cursor.continue(); // 下 移 游标 ， 和 迭代 执 行 
} 
}; 


【 例 17-1-10】 使 用 IndexedDB 实现 学 生 基 本 信息 采集 系统 。 代 码 如 下 所 示 ， 页 面 效果 
如 图 17-4 所 示 。 学 生 信息 包括 学 生 姓 名 、 入 学 年 龄 、 性 别 等 信息 。 根 据 如 图 17-4 所 示 的 
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页 面 效 果 编 写 代 码 实现 添加 数据 、 获 取 数据 和 删除 数据 库 等 功能 。 




















图 17-4 学 生 基本 信息 采集 初始 页 面 和 添加 与 查询 页 面 


1 <!-- edu 17 1 10.html --> 
2 <!DOCTYPE htmi> 


3 <html> 

4 <head> 

5 <meta charset="utf-8" /> 

6 <title> 用 IndexedDB 实 现 学 生 基本 信息 采集 </title> 

<style> 

8 /* 2. 页 面 表现 设计 */ 

9 fieldset {text-align: center; border: lpx dashed #FF0000;} 
10 .myBtn {width: 80px;height: 35px;border: 1px dashed #0066FF;} 
了 </style> 
12 <script type="text/javascript"> 
13 // 定 义 全 局 变量 结果 集 、IDBOpenDBRequest、 对 象 仓库 
14 var db, request, objectStore; 

15 function createDB (dbName) { 

16 request = indexedDB.open (dbName, 1); 

于 了 request.onerror = function() { 

18 alert ("打开 数据 库 失 败 :" + event.target.errorCode); 

19 1 

20 request.onsuccess = function(event) { 

型 alert ("打开 数据 库 成 功 !") ; 

22 db = event.target.result; 

| var transaction = db.transaction ("user", 
"readwrite"); 

24 obJjectStore = transaction.objectStore ("user"); 

25 } 

26 request .onupgradeneeded = function (event) { 

27 alert (" 版 本 已 经 发 生 改变 ! ") ; 

28 db = event.target.result; // 获 取 结果 集 

29 objectStore = db.createObjectStore("user", { 

30 keyPath: "userNo" 

31 Eh 

32 indexNo = objectSstore.createIndex ("by userNo", 
"userNo", { 

33 unique: true 

34 1); 

35 } 

36 } 

37 createDB ('userinfo'); // 打 开 数 据 库 

38 function deleteDB (dbName) { // 删 除数 据 库 

39 request = indexedDB.deleteDatabase (dbName); 


40 request.onerror = function() { 


alert ("删除 数据 库 失败 !") ; 
} 
request.onsuccess = function(event) { 
alert ("删除 数据 库 成 功 !"); 
Var ta = document .getElementById ("display"); 
ta.innerHTML = '"; 
window.location.reload(); 
} 
} 
function getObject() { 
Var txtAear = document .getElementById("display"); 
txtAear .innerHTML =""; // 获 取 数 据 前 先 清理 一 下 页 面 已 显示 的 数据 
if(!db) { 
alert (" 请 先 打开 数据 库 ! ") ; 
return false; 
} 
Var store = db.transaction ("user") .objectStore ("user"); 
var keyRange = IDBKeyRange.lowerBound(0); // 规 定 从 0 开始 
Var cursorRequest = store.openCursor (keyRange); 
// 设 置 开启 游标 
cursorRequest.onsuccess = function(e) { 
Var result = e.target.result; 


if(!!result == false) 

return; 
getOneObject (result .value); // 取 一 个 对 象 数 据 
result .continue (); // 这 里 执行 轮 询 读 取 


] 
cursorRedquest .onerror = function(e) { 
alert (" 数 据 检 索 失 败 ! ") ; 

}; 

} 

function getOneObject (e) { // 取 一 个 对 象 数据 
var ta = document .getElementById("display"); 
ta.innerHTML += "学 号 :" + e.userNo + "姓名 :" + e.username 
+ "入 学 年 龄 :" + e.userage +", 性 别 :" + e.usersex + "\n"; 

} 

function addOobject() { 
Var UserID = document .getElementById ("xuehao") .value; 
Var name = document .getElementBylId ("name") .value; 
Var age = document .getElementById("age") .value; 
Var sex, flag = document.getElementByIlId("nan") .checked; 
sex = (flag) ? " 男 "” : " 女 "; // 条 件 表达 式 

if (userID.length > 0 && name.length > 0 && age >= 0 && sex.length 


> 0) { 
// 定 义 存储 在 对 象 仓库 中 的 对 象 
Var detail = { 
userNo: userID,username: name,userage: 
age,usersex: sex 
} 
if(!db) { 
alert ("请 先 打开 数据 库 ! ") ; 
return false; 
} 
var transaction = db.transaction(["user"], 
"readwrite"); 
objectStore = transaction.objectStore ("user"); 
objectStore .add (detail); 
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93 alert (" 数 据 添加 成 功 ! ") 7 

94 myFrm.Reset () 

95 } else { 

96 alert ("输入 数据 不 合法 ! 请 重新 输入 ") ; 

97 myFrm.xuehao.focus(); 

98 

99 } 

100 </script> 

101 </head> 
102 <body> 
103 <!-- 工 .页 面 内 容 设计  --> 

04 <form name="myFrm"> 

05 <fieldset> 
106 <legend align="center"> 学 生 基本 信息 采集 </legend> 

07 学 生 学 号 : <input type="text" name="xuehao" id="xuehao" 

required="required"><br /> 学 生 姓名 : 
08 <input type="text" name="name" id="name" required= 


"required"><br /> 入 学 年 龄 : 
9 <input type="number" id="age" value="20" min=1><br /> 性 别 : 
0 <input type="radio" id="nan"name="xb" value="male" checked> 男 
1 <input type="radio" id="nv" name="xb" value="female"> 女 <br /> 
2 <input type="button" class="myBtn" onclick="addObject()" 
value=" 添 加 数据 "> 


3 <input type="button" class="myBtn" onclick="getObject()" value= 
"获取 数据 "> 
4 <input type="button" class="myBtn" onclick="deleteDB 


('userinfo') "value=" 删 除数 据 库 "><br/> 
5 <textarea id="display" rows="5" cols="45"> </textarea> 
6 </fieldset> 
3 </form> 
8 </body> 
9 </html> 








代码 解释 : 案例 中 创建 的 数据 库 名 为 userinfo， 创 建 对 象 仓库 名 为 user。createDB 
(dbName) 函数 的 功能 是 根据 指定 参数 创建 数据 库 。deleteDB(dbName) 函数 的 功能 是 根据 
指定 参数 删除 数据 库 。getObjectO) 函 数 的 功能 是 获取 满足 条 件 的 所 有 对 象 ， 并 在 多 行文 本 
域 中 分 行 显示 。getOneObject(e) 函 数 的 功能 是 读 取 某 一 个 对 象 ， 并 显示 在 多 行文 本 域 中 。 
addObjectO 函 数 的 功能 是 将 用 户 在 表单 中 输入 的 信息 添加 到 对 象 仓 库 user 中 。 


17.2 HTMLS Canvas 画布 


HTML5 的 canvas 标记 用 于 图 形 的 绘制 ， 并 通过 脚本 (JavaScript) 来 完成 绘图 。canvas 
标记 本 身 并 没有 绘图 能 力 ， 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完成 。canvas 标记 作为 
图 形 的 容器 ， 可 以 通过 多 种 方法 使 用 Canvas 绘制 路 径 、 盒 、 圆 、 字 符 以 及 添加 图 像 。 


17.2.1 _ canvas 标记 


canvas 标记 是 双 标 记 ， 必 须 设置 宽度 、 高 度 及 id。 
1. 基本 语法 


<canvas id="oneCanvas" width="" height=""></canvas> 





默认 情况 下 canvas 标记 的 width 为 300px、 高 度 height 为 200px， 页 面 上 没有 边框 和 
内 容 。 除 非 通 过 CSS 定义 边框 样式 ， 才 可 以 显示 效果 ， 所 以 必须 借助 于 JavaScript 才能 绘 
图 。 常 用 的 绘制 颜色 、 样 式 和 阴影 的 属性 及 说 明 如 表 17-1 所 示 。 绘 制 一 个 矩形 代码 如 下 : 


表 17-1 颜色 、 样 式 和 阴影 的 属性 及 说 明 









fillstyle 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 











strokeStyle 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 模式 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 










设置 或 返回 用 于 阴影 的 模糊 级 别 
设置 或 返回 阴影 与 形状 的 水 平 距离 
设置 或 返回 阴影 与 形状 的 垂直 距离 


shadowBlur 
shadowOffsetX 
shadowOffsetY 











<body> 
<canvas id="aCanvas" width="200" height="100"></canvas> 
<script type="text/javascript"> 
Var myCanvas=document .getElementById("aCanvas"); 


// 获 取 Canvas 对 象 
Var conText=myCanvas .getContext ("2d") ;// 获 取 绘 图 环境 (上下文 环境 ) 
conText .fillSstyle="#FF0000"; // 设 置 填充 样式 
conText .fillRect (10,10,150,75); /7 绘制 矩形 
</script> 
</body> 


2. 绘制 图 形 

利用 canvas 标记 绘制 图 形 一 般 需 要 经 过 下 列 步骤 : 

(1) 在 body 标记 中 插入 canvas 标记 ， 并 设置 id、width、height。 

<canvas id="aCanvas" width="200" height="100"></canvas> 

(2) 在 body 标记 中 插入 script 标记 ， 并 在 该 标记 内 插入 相关 JavaScript 代码 。 

(3) 通过 id 获取 页 面 上 canvas 对 象 。 

var myCanvas=document .getElementById ("aCanvas"); // 获 取 Canvas 对 象 

(4) 创建 具有 绘图 功能 的 环境 对 象 context， 参 数 为 24 或 3d。 

var conText=myCanvas .getContext ("2d"); // 获 取 绘 图 环境 (也 称 上 下 文 环境 ) 


(5) 在 绘图 环境 对 象 内 绘图 。 
。 填充 。 分 为 填充 样式 和 填充 图 形 。 








conText .fillSstyle="#FF0000"; // 设 置 填充 样式 

conText .fillRect (10,10,150,75); // 绘 制 矩 形 

。 绘制 边框 (外 轮廓 )。 绘 制 样式 和 绘制 图 形 及 绘制 线条 的 宽度 (相当 于 画笔 粗细 )。 
conText .strokeStyle="#FF0000"; // 设 置 边框 样式 

conText .lineWidth=8; // 图 形 边框 宽度 ， 不 加 单位 px 
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conText . strokeRect (0,0,200,100); // 绘 制 边框 


。 清除 矩形 区 域 
conText .clearRect (x,y,width,height) 
【 例 17-2-1】 用 canvas 标记 绘制 矩形 。 代 码 如 下 ， 页 面 效果 如 图 17-5 所 示 。 


Ei 
2 <!doctype html> 
3 <html lang="en"> 
<head> 
<meta charset="UTF-8"> 视频 讲解 
<title>Canvas 绘 制 矩形 </title> 
</head> 
<body> 
<canvas id="oneCanvas" width="" height="" style="border:1px solid 
blue"></canvas> 
0 <script type="text/javascript"> 
1 Var myCanvas=document .getElementById("oneCanvas"); 
// 获 取 画 布 对 象 
2 Var conText=myCanvas.getContext ("2d"); 
// 获 取 绘 图 环境 (上 下 文 环境 ) 
5 conText.fil1Style="#00FF00"7 // 设 置 填充 样式 
4 conText .fillRect (0,0,200,100); // 填 充 和 矩形 
5 conText .strokeSstyle="#FF0000"; // 设 置 边框 样式 
6 conText .lineWidth=8; // 图 形 边框 宽度 
六 conText .strokeRect (0,0,200,100); // 绘 制 边框 
8 
9 
0 





</script> 
</body> 
</html> 





2 











图 17-5 ”Canvas 绘制 矩形 效果 图 


17.2.2 Canvas 坐标 


Canvas 画布 是 一 个 二 维 网 格 ， 分 XX 轴 和 YY 轴 ， 其 中 义 轴 方向 从 左 向 右 ，Y 轴 方 向 从 
上 到 下 。 绘 制 矩形 方法 是 fllRect (X,Y,width,height)， 其 中 义 、Y 参数 分 别 表 示 义 轴 、Y 轴 
的 坐标 ， 其 余 两 个 参数 分 别 表 示 甜 形 的 宽度 和 高 度 ， 如 图 17-6 所 示 。Canvas 绘图 环境 对 
象 的 左上 角 坐 标 为 0，0)。 例 如 fillRect (0,0,200,175) 表 示 画 布 上 绘制 200X175px 的 矩形 ， 
从 左上 角 (0，0) 开 始 绘制 。 


height 








oe 
图 17-6 ”Canvas 坐标 系统 
17.2.3 Canvas 路 径 
在 Canvas 上 除了 绘制 矩形 、 正 方形 和 直线 外 ， 需 要 使 用 路 径 来 进行 绘图 。 绘制 前 需要 


使 用 beginPath() 方 法 开始 路 径 ， 然 后 形成 绘制 路 径 ， 结 束 后 需要 使 用 closePath() 方 法 关闭 
路 径 。 最 后 才 开始 填充 或 绘制 。 常 用 绘制 路 径 方法 及 说 明 如 表 17-2 所 示 。 


表 17-2 绘制 路 径 常用 方法 及 说 明 


方 法 说 明 
fl0 填充 当前 绘图 (路径) 
stroke() 绘制 已 定义 的 路 径 (边框 
beginPath() 起 始 一 条 路 径 ， 或 重 置 当 前 路 径 
moveTo() 把 路 径 移动 到 画布 中 的 指定 点 ， 不 创建 线条 
closePathO) 创建 从 当前 点 回 到 起 始点 的 路 径 
lineTo0 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 
clip0 从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 
quadraticCurveTo0 创建 二 次 贝 塞 尔 曲线 
bezierCurveTo0 创建 三 次 贝 塞 尔 曲线 
arc0 创建 弧 /曲线 〈 用 于 创建 圆 形 或 部 分 圆 ) 
arcTo() 创建 两 切线 之 间 的 弧 / 曲 线 
isPointmPathO) 如 果 指 定 的 点 位 于 当前 路 径 中 ， 则 返回 tue， 和 否则 返回 false 


下 面 以 在 Canvas 中 绘制 圆 形 为 例 ， 说 明 具 体 步 又 。 
1. 基本 语法 


context.arc(x, y, radius, startAngle,endAngle, anticlockwise) 


2. 语法 说 明 

其 中 x、y、radius 分 别 圆心 x 坐标 、y 坐标 和 半径 。startAngle、endAngle 分 别 表示 绘 
制 开始 角度 和 绘制 结束 角度 。anticlockwise 表示 绘制 方向 是 否 是 逆 时 针 的 。true 为 逆 时 针 ， 
false 为 顺 时 针 。 

3， 具体 步骤 

前 四 步 与 绘制 矩形 步骤 相同 ， 此 处 省 略 。 后 续 步 骤 如 下 : 

(1) 开始 路 径 。 方 法 为 conText.beginPath()。 

(2) 绘制 路 径 。 方 法 如 下 : 


第 
conText.arc(150，150，100，0，Math.PI * 2，true); // 绘 制 路 径 他 
党 
局 
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(3) 关闭 路 径 。 方 法 为 conText. closePath()。 
(4) 绘图 。 分 为 填充 和 绘制 圆 形 边 框 ， 与 绘制 矩形 类 似 。 


conText fill1Style = "rgba(255,0,0,0.75) "7 // 填 充 样式 
conText .fill1(); // 填 充 绘图 
conText . strokeStyle = 'rgba(0,255,0,0.50)"'; // 绘 图 样式 
conText .lineWidth=20; / /绘制 边 框 宽度 
conText .stroke () 7 // 填 充 绘图 


其 中 rtgba 是 以 RGB 为 基础 再 加 上 不 透明 度 的 属性 。 格 式 如 下 : 


rgba (red, green, blue, opacity) 


opacity 属性 表示 透明 度 。 允 许 的 值 为 0~1 之 间 带 有 小 数 的 数值 。 
【 例 17-2-2】 用 Canvas 标记 绘制 圆 形 。 代 码 如 下 ， 页 面 效 果 如 图 17-7 所 示 。 


1 <!-- edu 17 2 2.html --> 由 考 克 和 
2 <!doctype html> 加 
3 <html lang="en"> [SE 
4 <head> 
5 <meta charset="UTF-8"> 视频 讲解 
6 <title>Canvas 绘 制 圆 形 </title> 
7 </head> 
8 <body> 
9 <canvas id="oneCanvas" width="300" height="300" style= 
"background:#FOFOF0;"></canvas> 
10 <script type="text/javascript"> 
11 var myCanvas=document .getElementById("oneCanvas"); 
// 获 取 Canvas 对 象 
12 var conText=myCanvas.getContext ("2d"); // 获 取 绘图 环境 (上下文 环境 ) 
和 conText .beginPath () // 开 始 路 径 
14 conText.arc(150, 150, 100, 0, Math.PI * 2, true); // 绘 制 路 径 
15 conText .closePath(); // 关 闭路 径 
16 conText .fillstyle = "rgba(255,0,0,0.75) "7 
// 填 充 样式 ， 第 4 个 参数 表示 透明 度 
17 conText .fill (); // 填 充 绘图 
18 ConText . strokeStyle = 'rgba(0,255,0,0.50)"'; 
// 绘 图 样式 ， 第 4 个 参数 表示 透明 度 
19 conText .lineWidth=20; // 绘 制 边框 宽度 
20 conText.stroke(); // 绘 制 边框 
2 </acript> 
22 </body> 
23 </html> 


17.2.4 ” Canvas 绘制 线段 
利用 Canvas 标记 可 以 绘制 线段 。 常 用 的 方法 有 moveTo(x,y) 和 lineTo(x,y)。 
1. 基本 语法 


context .moveTo (x, y) // 定 义 线段 开始 坐标 ，x 为 X 轴 坐标 ，Y 为 了 Y 轴 坐标 
context .lineTo (x, y) // 定 义 线段 结束 坐标 ，x 为 X 轴 坐标 ，Y 为 Y 轴 坐标 





2. 


语法 说 明 


两 个 方法 的 参数 相同 , x 为 义 轴 坐标 , y 为 站 轴 坐 标 。moveTo0 表 示 设 置 线段 的 起 点 ; 


lineTo0 表 示 设 置 线段 的 终点 
作用 相同 。 从 第 2 条 线段 开始 
一 条 线段 的 起 点 与 上 一 条 线段 的 终点 相同 。 

【 例 17-2-3】 用 Canvas 标记 绘制 直线 。 代 码 如 下 ， 








图 17-7 Canvas 绘制 圆 形 图 17-8 Canvas 
1 <!-- edu 17 2 3.html --> 


C [@ fley/F/W 图 女 fley//F/W 儿女 | 多 


。 第 1 条 线段 起 点 用 moveTo0 方 法 与 lineTo0 方 法 ”加 家 
， 如 果 没 有 moveTo0 设 置 线段 起 点 ， 则 说 明 下 





页 面 效果 如 图 17-8 所 示 。 ”视频 讲解 











2 <!doctype html> 
3 <html lang="en"> 


<meta charset="UTF-8"> 
<title>Canvas 绘 制 直线 </title> 








绘制 直线 


<canvas id="oneCanvas" width="400" height="200" style="background: 


<script type="text/javascript"> 
var myCanvas=document .getElementById ("oneCanvas") ;// 获 取 Canvas 对 象 


Var conText=myCanvas.getContext ("2d"); 
.strokeStyle = "rgb(250,0,0)"; 
.fillstyle = "rgb(250,0,0)" 
.moveTo (10,10); 
.lineTo(10,150); 


moveTo(10,150); 
lineTo(100,180); 


.lineTo (200,10); 
.lineTo (400,100); 
.lineWidth=8; 


stroke(); 


4 <head> 

5 

6 

7 </head> 

8 <body> 

9 

9 #FO0FOF0;"></canvas> 
10 

11 

12 

3 conText 
14 conText 
15 conText 
16 conText 
FE conText. 
18 ConText - 
lL conText 
20 conText 
SL conText 
22 ConText - 
23 </script> 
24 </body> 
25 </html> 


// 第 1 条 线 起 点 
// 第 1 条 线 终点 
// 第 2 条 线 起 点 
// 第 2 条 线 终点 





// 获 取 绘 图 环境 (上 下 文 环境 ) 


// 第 3 条 以 第 2 条 的 终点 为 起 点 -终点 
// 第 4 条 以 第 3 条 的 终点 为 起 点 -终点 


// 绘 制 边框 宽度 
// 绘 制 边框 
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17.2.$S Canvas 绘制 文本 


利用 Canvas 除了 可 以 绘制 矩形 、 圆 形 等 ， 还 可 以 绘制 文本 。 
1. 基本 语法 





Context .fillText (text, x, y) // 在 canvas 上 绘制 实心 的 文本 
Context .strokeText (text, x, y) // 在 canvas 上 绘制 空心 的 文本 


context .font="font-style font-weight font-variant font-size/line-height 
font-family" 
context .textAlign="startlend|left|right|center" // 水 平 对 齐 


context .textBaseline="alphabetic|toplhanging|lmiddle|ideographic|bottom"; 


// 垂 直 对 齐 

2. 语法 说 明 

context.fillText(text,x,y): 填充 文本 。 

context.strokeText(text,x,y): 绘制 文本 轮廓 。 其 中 参数 text 表示 要 绘制 的 文本 ; 参数 x 
表示 文本 起 点 的 和 坐标 轴 ; y 表示 文本 起 点 的 Y 坐标 轴 。 

context font: 设置 字体 样式 。 设 置 方 法 与 CSS 的 font 属性 方法 相同 。 

context.textAlign: 设置 或 返回 文本 内 容 的 当前 对 齐 方式 。 其 值 可 设置 为 start (文本 在 
指定 的 位 置 开 始 )、end (文本 在 指定 的 位 置 结束 )、left (文本 左 对 齐 )、center (文本 的 中 
心 被 放置 在 指定 的 位 置 )、right (文本 右 对 齐 )。 

context.textBaseline: 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 (垂直 对 齐 方 式 )。 
其 值 可 设置 为 top (顶部)、hanging( 甚 挂 ， 比 top 略 高 些 )、middle (中 部 )、alphabetic( 默 
认 , 普通 的 字母 基线 ) ideographic( 表 意 基线 , 与 bottom 同 效 果 )、bottom( 底 部 )。textBaseline 
属性 在 不 同 的 浏览 器 上 效果 不 同 ， 特 别 是 使 用 "hanging" 或 "ideographic" 时 ， 在 不 同 浏览 器 
中 效果 不 同 。 绘 制 文本 格式 如 下 所 示 : 


context .textAlign="start"; // 设 置 提示 信息 水 平 对 齐 方法 
context .font="24px 黑体 "7 // 设 置 提示 信息 字体 
context .fillText ("文本 基线 位 置 : ",0,220) ; // 设 置 提示 信息 


17.2.6 Canvas 渐变 


渐变 可 以 填充 在 矩形 、 圆 形 、 线 条 、 文 本 等 。 各 种 形状 可 以 自己 定义 不 同 的 颜色 。 
1. 基本 语法 
Var grad=context.createLinearGradient (xstart, ystart, xend, yend); 
/ /创建 线 条 渐变 
grad.-addColorStop (offset, color); // 指 定 颜 色 停 止 , offset 可 以 是 0 至 1 


Var grad=context.createRadialGradient (xstart, ystart, radiusstart, xend, 
yend, radiusend) 
// 圆 径 向 渐变 
context .fillSstyle=grad; / /渐变 对 象 变量 
context .fillRect (x,y,width,height):; 


2. 语法 说 明 
线条 渐变 createLinearGradient() 中 参数 xstart 表示 渐变 开始 点 x 坐标 ; ystart 表示 渐变 
开始 点 y 坐标 ; xEnd 表示 渐变 结束 点 x 坐标 ; yEnd 表示 渐变 结束 点 y 坐标 。addColorStop0 








中 参数 offset 表示 设 定 的 颜色 离 渐变 结束 点 的 偏 移 量 (0 一 D); color 表示 绘制 时 要 使 用 的 颜色 。 
createRadialGradient() 中 参数 有 6 个 ， 前 3 个 参数 表示 径 向 渐变 开始 圆心 坐标 和 半径 ; 
后 3 个 参数 表示 径 向 渐变 结束 圆心 坐标 和 半径 。 
当 使 用 渐变 对 象 时 ,必须 使 用 两 种 或 两 种 以 上 的 停止 颜色 , 设置 fllStyle 或 strokeStyle 
的 值 为 渐变 ， 然 后 绘制 形状 ， 如 和 矩形 、 文 本 或 一 条 线 。 
【 例 17-2-4】 绘 制 渐变 线条 部 分 代码 如 下 所 示 ， 效 果 如 图 17-9 右 中 部 所 示 。 
var grad=context.createLinearGradient (50,280,400,50); // 创 建 线条 渐变 
grad.addColorStop (0, "#FF0000"); // 设 置 偏 移 量 为 0、 渐 变 停止 颜色 









































grad.addColorStop (1, "#00FF00"); // 设 置 偏 移 量 为 1、 渐 变 停止 颜色 
context .fillstyle=grad; // 设 置 填充 样式 为 渐变 
context .fillRect (50,280, 400, 50); // 填 充 和 矩形 
ee] 
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公文 本 对 齐 方式 : 


sl 
在 4 定位 面 结束 end| 任 指定 位 置 开始 tart 


文本 中 心 在 指定 位 置 center 


文本 基线 位 置 
Borom-aXg Middle Alphabetc-axXg Jeographic-aXg 


























TopHag Hangng 图 像 
选择 部 分 区 域 
绘制 指定 宽度 
按 指定 宽 和 高 度 的 图 像 
度 和 高 度 
绘制 图 像 





























图 17-9 综合 运用 Canvas 绘制 文本 、 图 像 、 渐 变 








17.2.7 Canvas 绘制 图 像 


把 一 幅 图 像 放 置 到 画布 上 ， 即 在 Canvas 上 画 出 图 像 。 
1. 基本 语法 


context .drawImage (image, x, y); // 在 坐标 (x, y) 处 开始 绘制 图 像 image 
context .createPattern (image, type); // 图 像 平 铺 
context .clip() // 图 像 裁剪 


var imagedata=context .getImageData (sx,sy,sw,sh); // 像 素 处 理 
context .drawImage (image,x,y,width,height)  // 按 指定 宽度 和 高 度 绘图 
context .drawImage (image, sx, sy, Sw, sh, dx, dy, dw, dh); 


// 选 取 图 像 的 部 分 矩形 区 域 进行 绘制 





2. 语法 说 明 
drawImage(image,x,y) 方 法 中 参数 说 明 如 下 : x 表示 绘制 图 像 的 x 坐标 ; y 表示 绘制 图 
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像 的 y 坐标 ，image 表示 图 像 对 象 。 

createPattern(image,type) 方 法 中 参数 说 明 : type 取 值 有 4 种 ， 分 别 为 no-repeat 表示 不 
平 铺 、repeat-x 表示 横 方 向 平 铺 、repeat-y 表示 纵 方 向 平 铺 、repeat 表示 全 方向 平 铺 。image 
为 图 像 对 象 。 

context.clip0 方 法 只 绘制 封闭 路 径 区 域内 的 图 像 , 不 绘制 路 径 外 部 图 像 。 使 用 时 先 创建 
裁剪 区 域 ， 再 绘制 图 像 。 代 码 如 下 所 示 ， 效 果 如 图 17-9 右边 所 示 。 














context .beginPath () // 开 始 路 径 

context .arc(200，150，100，0，Math.PI * 2，true); // 形 成 圆 形 路 径 
context.closePath () 7 // 结 束 路 径 

context .clip(); // 从 原 image 中 剪裁 出 圆 形 部 分 图 像 
context .drawImage (image, 50, 380); // 除 剪裁 部 分 ， 其 余 不 可 见 


drawImage(image,x,y,width,height) 方 法 中 参数 说 明 如 下 : x 表示 绘制 图 像 的 x 坐标 ; y 
表示 绘制 图 像 的 y 坐标 ，width 表示 绘制 图 像 的 宽度 height 表示 绘制 图 像 的 高 度 。 

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 方 法 中 参数 说 明 如 下 : sx 表示 图 像 上 的 x 坐 
标 ; sy 表示 图 像 上 的 y 坐标 ;sw 表示 矩形 区 域 的 宽度 ， sh 表示 算 形 区 域 的 高 度 : dx 表示 
画 在 canvas 的 x 坐标 ; dy 表示 画 在 canvas 的 y 坐标 ; dw 表示 画 出 来 的 宽度 ; dh 表示 夯 出 
来 的 高 度 。 各 个 参数 的 标注 如 图 17-10 所 示 。 


eontert. drarleage (iasge, $1, $7, su, sh, di, dy, ds, dh) 





Was, dr) 








lage Canvas 
图 17-10 选取 图 像 的 部 分 矩形 区 域 进行 绘制 


【 例 17-2-4】 综 合 运用 Canvas 绘制 文本 、 图 像 、 渐 变 。 代 码 如 下 ， 页 面 效 果 如 图 17-9 
所 示 。 


1 <!-- edu 17 2 4.html --> 
2 <!doctype html> 
3 <html lang="en"> 


4 <head> 
5 <meta charset="UTF-8"> 
6 <title>Canvas 绘 制 文本 、 图 像 、 渐 变 </title> 
是 <script type="text/javascript"> 
8 交 昌 二 二 
9 function showPage (){ 
10 Var myCanvas=document .getElLementBYId ("oneCanvas") 7 


// 获 取 画 布 对 象 


Ly. 
Ye 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
a5 
26 
27 
28 
29 
30 
3 
32 
33 
34 
35 
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37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 


50 
51 


52 
53 
54 
55 
56 
57 


Var conText=myCanvas.getContext ("2d"); 
conText -strokeStyle = "rgb(250,0,0)"; 
conText .fillstyle = "rgb(0,0,0)" 

// 在 X 轴 150 处 绘制 垂直 红线 

conText .textAlign="start"; 

conText .font="24px 黑体 "; 

conText .fillText ("文本 对 齐 方 式 : ",0,24); 
conText .strokestyle="red"; 

conText .moveTo(350,20); 
conText.lineTo(350,170); 

conText .stroke () ; 

// 绘 制 文本 -textAlign 属 性 应 用 

conText .font="24px Arial"; 

ConText .textAlign="start"; 


// 获 取 绘图 环境 对 象 


// 设 置 提示 信息 水 平 对 齐 方法 


// 设 置 提示 信息 字体 
// 设 置 提示 信息 


conText .fillText ("在 指定 位 置 开始 start", 350, 60); 


conText .textAlign="end"; 


conText .fillText ("在 指定 位 置 结束 end", 350,80) ; 


conText .textAlign="center"; 


conText .fillText ("文本 中 心 在 指定 位 置 center", 350,120); 


conText .lineWidth=1; 
conText .fil1l1(); 

// 在 Y 轴 250 处 画 一 条 水 平 红线 
ConText .textAlign="start"; 
conText .font="24px 黑体 "; 
conText .fillText ("文本 基线 位 置 : ",0,220); 
conText .strokeStyle="red"; 

conText .moveTo (0,250); 

conText .lineTo(700,250); 

conText .stroke (); 


// 设 置 提示 信息 水 平 对 齐 方法 


// 设 置 提示 
// 设 置 提示 






让 息 字体 
言 息 


// 每 个 在 y = 250 处 设置 不 同 的 textBaseline 值 ， 显 示 单 词 的 位 置 


ConText .font="20px Rrial"7 

conText .textBaseline="top"; 

conText .fillText ("Top-Hag", 20,250); 
conText .textBaseline="bottom"; 

conText .fillText ("Bottom-aXg",100,250); 
conText .textBaseline="middle"; 

conText .fillText ("Middle", 220,250); 
conText .textBaseline="alphabetic"; 


//Hag 表 示 字 母 组 合 


//aXg 表 示 字 母 组 合 


conText .fillText ("Alphabetic-aXg",300,250); //aXg 表 示 字 母 组 合 


conText .textBaseline="ideographic"; 


conText .fillText ("ideographic-axXg", 460,250); 


conText .textBaseline="hanging"; 
conText .fillText ("Hanging", 620,250); 
// 绘 制 渐变 

conText .font="20px 黑体 "; 

conText .textBaseline="bottom"; 
conText .fillText ("渐变 : ",0,320); 





//aXg 表 示 字 母 组 合 
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58 Var grad=conText .createLinearGradient (50,280, 400, 50); 

// 创 建 线条 渐变 
59 grad.addColorSstop (0, "#FF0000"); // 设 置 渐变 停止 颜色 1 
60 grad.addColorStop (1, "#00FF00"); // 设 置 渐变 停止 颜色 2 
61 conText .fillstyle=grad; // 设 置 填充 样式 为 渐变 
62 conText .fillRect (50,280, 400, 50); // 填 充 和 矩形 
63 /* 绘 制图 像 */ 
64 Var myCanvas=document .getElementById ("oneCanvas"); 

// 获 取 画 布 对 象 
65 Var conText=myCanvas .getContext ("2d"); // 获 取 绘 图 环境 对 象 
66 conText .font="20px 黑体 "; 
7 conText .textBaseline="bottom"; 
68 conText .fillText ("图 像 : " ,0,380); 
69 var img=new Image(); 
70 img.src="45567.jpg"; 
3 conText .drawImage (img, 50, 380); // 在 指定 位 置 处 开始 绘图 
72 conText .drawImage (img,450,680,100,100) ;// 按 指定 宽度 和 高 度 绘图 
| /* 选取 图 像 的 部 分 矩形 区 域 进行 绘制 */ 
74 conText .drawImage (img, 200, 200,100,100, 550, 660, 120,120); 
5 /* 图 像 圆 形 剪 裁 */ 
76 conText .fillStyle="#F8F8F8"; // 填 充 样式 
17 conText .fillRect (680,378, 400, 400); // 填 充 
78 conText .beginPath (); // 开 始 路 径 
79 conText.arc(890, 578, 100, 0, Math.PI * 2, true); 

// 形 成 圆 形 路 径 
80 conText .closePath () ; // 结 束 路 径 
81 conText .clip(); // 圆 形 剪 裁 
82 conText .drawImage (img, 680, 378); 
// 按 圆 形 剪 裁 图 像 ， 其 余部 分 不 可 见 

83 } 
84 = 
85 </script> 


86 </head> 
87 <body onload="showPage ();"> 


88 <div> 

89 <img src="45567.jpg" id="myimg" style="float:left;"/> 

90 <canvas id="oneCanvas" width="1100" height="800" style= 
"background:#FOFOF0;"></canvas> 

91 </div> 

9 </body> 

93 </html> 


17.3 ” HTMLS 拖 放 


拖 放 (Drag 和 Drop) 是 一 种 常见 的 特性 ， 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 拖 放 是 
HTML5 标准 的 组 成 部 分 ， 任 何 元 素 都 能 够 拖 放 ， 只 要 设置 draggable 属性 为 tue 即 可 。 正 
9、Firefox、Opera、Chrome 以 及 Safari6 等 高 版 本 的 浏览 器 均 支持 拖 放 。 

为 了 使 元 素 可 拖 动 ， 可 采取 下 列 步 又。 


17.3.1 设置 元 素 为 可 拖 放 
需要 将 该 元 素 的 draggable 属性 值 设置 为 tue。 代 码 如 下 : 


<img id="" src="" draggable="true" > 


17.3.2” 拖 放 事 件 


拖 动 过 程 会 触发 很 多 事件 ， 事 件 、 事 件 属性 及 说 明 如 表 17-3 所 示 。 
表 17-3” 拖 放 过 程 发 生 的 事件 及 说 明 








事件 | 事件 属性 说 明 
dragstart | ondragstart 网 页 元 素 开始 拖 动 时 触发 
drag ondrag 被 拖 动 的 元 素 在 拖 动 过 程 中 持续 触发 





dragenter | ondragenter 被 拖 动 的 元 素 进入 目标 元 素 时 触发 ， 应 在 目标 元 素 监听 该 事件 

dragleave | ondragleave 被 拖 动 的 下 离开 目标 元 素 时 触发 ， 应 在 目标 元 素 监听 该 事件 

dragover | ondragover 昌 标 元 素 之 中 时 持续 触发 ， 应 在 目标 元 素 监听 该 事件 
元 素 时 触发 。 监 听 器 负责 检索 被 拖 动 的 数据 以 及 在 放 





drop ondrop 


置 位 置 插 入 它 
dragend ondragend 网 页 元 素 拖 动 结束 时 触发 














17.3.3 dataTransfer 对 象 


dataTransfer 对 象 ， 它 是 事件 event 对 象 的 一 个 属性 ， 用 于 从 被 拖 动 元 素 向 放置 目标 传 
递 字 符 串 格式 的 数据 ， 可 在 拖 放 事 件 的 事件 处 理 程序 中 访问 dataTransfer 对 象 。 该 对 象 的 
常用 属性 及 说 明 如 表 17-4 所 示 ， 常 用 方法 及 说 明 如 表 17-5 所 示 。 


表 17-4 dataTransfer 对 象 常用 的 属性 及 说 明 


属 性 说 了 明 
dropEffect 拖 放 的 操作 类 型 , 决定 了 浏览 器 如 何 显示 鼠标 形状 , 其 值 可 为 copy、 move、 link 和 none 


Ni edt 指定 所 允许 的 操作 ， 其 值 可 为 copy、move、link、copyLink、copyMove、linkMove、 
Se OWeC | all、none 和 uninitialized (默认 值 ， 等 同 于 all， 即 允许 一 切 操作 ) 





包含 一 个 FileList 对 象 ， 表 示 拖 放 所 涉及 的 文件 ， 主 要 用 于 处 理 从 文件 系统 拖 入 浏览 
files 

器 的 文件 
types 存储 在 dataTransfer 对 象 的 数据 的 类 型 


例如 ,在 拖 动 开始 时 , 在 dataTransfer 对 象 上 存储 一 条 文本 信息 , 内容 为 "Hello World! ”。 
当 拖 放 结束 时 ， 可 以 用 getData() 方 法 取出 这 条 信息 。 代 码 如 下 所 示 : 
draggableElement .addEventListener('dragstart', function(event) { 


event .dataTransfer.setData('text', 'Hello World!'); // 存 储 信息 
DD); 


表 17-5 dataTransfer 对 象 常用 的 方法 及 说 明 





在 dataTransfer 对 象 上 存储 数据 .第 一 个 参数 format 用 来 指定 存储 的 
数据 类 型 ， 例 如 text、url、text/html 等 
getData(format) 从 dataTransfer 对 象 取出 数据 


setData(format, data) 








清除 dataTransfer 对 象 所 存储 的 数据 。 如 果 指 定 了 format 参数 , 则 只 
清除 该 格式 的 数据 ， 否 则 清除 所 有 数据 


clearData(format) 
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续 表 













属 性 说 明 
指定 拖 动 过 程 中 显示 的 图 像 。 默 认 情 况 下 ， 许 多 浏览 器 显示 一 个 被 
拖 动 元 素 的 半 透 明 版 本 。 参 数 imgElement 必须 是 一 个 图 像 元 素 ， 而 


不 是 指向 图 像 的 路 径 ， 参 数 x 和 y 表示 图 像 相 对 于 鼠标 的 位 置 
17.3.4 拖 放 操作 实现 步骤 


拖 放 元 素 的 过 程 可 分 为 创建 可 拖 放 对 象 、 设 置 放置 对 象 两 个 步 又。 具体 如 下 ; 

1. 创建 一 个 可 拖 放 对 象 

以 一 个 <img> 标 记 为 例 ， 要 使 该 标记 成 为 拖 放 对 象 ， 需 要 设置 该 元 素 的 draggable 属性 
为 tue。 同时 给 该 标记 的 dragstart 事件 设置 一 个 事件 监听 器 存储 拖 放 数据 。 事 件 监 听 器 
dragstart 会 设置 允许 的 效果 (copy、move、link 或 者 是 组 合 形式 的 )。ondragstart 属性 绑 定 
drag(event) 函 数 ， 它 规定 了 被 拖 动 的 数据 。 通 过 dataTransfersetData() 方 法 设置 被 拖 放 数 据 
的 数据 类 型 和 值 。 具 体 代 码 格式 如 下 : 


<img src="45567.jpg" draggable="true" ondragstart="drag (event)" id="dragl" /> 

function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id); } 

参数 1 是 数据 类 型 ， 值 为 "Text"; 参数 2 是 数据 信息 ， 值 为 可 拖 动 元 素 的 id ("drag1")。 

2. 设置 放置 对 象 

能 够 接受 拖 放 元 素 的 对 象 称 为 放置 对 象 ( 或 目标 对 象 )， 放置 对 象 至 少 要 监听 两 个 事件 。 

(1) dragover 事件 。 该 事件 对 应 的 事件 句柄 ondragover， 被 拖 动 元 素 停留 在 放置 对 象 
之 中 时 持续 触发 。 默 认 方 式 下 ， 无 法 将 数据 /元 素 放置 到 其 他 元 素 中 ， 需 要 设置 允许 放置 ， 
必须 阻止 对 元 素 的 默认 处 理 方式 。 通 过 给 ondragover 事件 属性 绑 定 alowDrag(event) 函 数 ， 
在 函数 中 使 用 event.preventDefault0 方 法 来 实现 阻止 默认 处 理 方式 。 代 码 如 下 所 示 : 


<div id="divl" ondrop="drop (event)" ondragover="allowDrop (event)"> 
function allowDrop (ev) { 

ev.preventDefault () // 阻 止 对 元 素 的 默认 处 理 方式 
} 


(2) drop 事件 。 该 事件 对 应 的 事件 句柄 ondrop， 人 允许 执行 真正 的 放置 。ondrop 属性 绑 
定 drop(event) 函 数 完成 放置 功能 。 当 放置 被 拖 数据 时 ， 会 发 生 drop 事件 。 该 事件 将 阻止 对 
元 素 的 默认 处 理 方式 、 获 得 拖 放 元 素 的 数据 信息 、 添 加 被 拖 放 的 元 素 。 代 码 如 下 所 示 : 
function drop (ev) { // 放 置 
ev.preventDefault (); // 阻 止 对 元 素 的 默认 处 理 方式 ， 默 认 行为 是 以 链接 形式 打开 


var data=ev.dataTransfer.getData ("Text");// 获 取 拖 放 数 据 ，data 中 存储 的 元 素 id 
ev.target .appendChild (document .getElementById(data)); 


// 被 拖 元 素 追 加 到 放置 元 素 中 





setDragImage(imgElement, x, y) 





} 


以 图 层 div 为 例 ， 把 div 作为 目标 对 象 ， 设 置 图 层 的 ondrop 和 ondragover 事件 属性 ， 
并 绑 定 相关 事件 处 理 代码 。 代 码 如 下 所 示 : 


<div id="divl" ondrop="drop (event)" ondragover="allowDrop (event) "> 





【 例 17-3-1】HTMLS 拖 放 图 像 应 用 。 代 码 如 下 ， 页 面 效果 如 图 17-11 所 示 。 


一 下 有 
FS 

/DD mms» 
© CC | @ fley/FVWeb 茸 洪 开 发 技 椒 -第 3 版 -20170518/ 数 学 十 图 广 | 图 ; 





| fle/WFVWeb 前 庙 开 发 技术 -第 3 版 -20170518/ 吾 学 专 好 女 | 多 





两 个 div 中 图 像 互 拖 放 


























图 17-11 HTMLS5 拖 放 图 像 应 用 


1 x== Ou 17 3 1.htnl -=> 
2 <!doctype html> 
3 <html lang="en"> 


<head> 视频 讲解 





4 
与 <meta charset="UTF-8"> 
6 <title>HTML5 拖 放 图 像 </title> 
六 <style type="text/css"> 
8 #divl, #div2 {float:left; width:200px; height:200px; 
9 margin:15px;padding:15px;border:1lpx dashed #0066ff;} 
10 #dragl {width:200px;height:200px;} 
11 </style> 
12 <script type="text/javascript"> 
13 function $(id) {return document .getElementById (id);}// 获 取 元 素 
14 function allowDrop (ev){ 
V5 // 阻 止 对 元 素 的 默认 处 理 方式 
16 ev.preventDefault ();} 
E function drag(ev){ 
18 // 设 置 被 拖 数据 的 数据 类 型 和 值 
19 ev.dataTransfer.setData("Text",ev.target .id);} 
20 function dropl(ev){ 
21 ev.preventDefault () ;// 阻 止 对 元 素 的 默认 处 理 方式 
22 var data=ev.dataTransfer.getData ("Text");// 获 得 被 拖 的 数据 
23 ev.target .appendCchild($ (data) ) ; // 添 加 拖 放 元 素 
24 } 
25 </script> 
26 </head> 
27 <body> 
28 <h3> 两 个 div 中 图 像 互相 拖 放 </h3><hr> 
29 <div id="divl" ondrop="drop (event)" ondragover="allowDrop (event)"> 
30 <img src="45567.jpg" draggable="true" ondragstart="drag (event)" 
id="drag1"/> 
31 </div> 
3 <div id="div2" ondrop="drop (event)" ondragover="allowDrop (event) "> 
</div> 
33 </body> 
34 </html> 
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17.4 HTMLS Web Worker 


在 HIML5 中 提出 了 Web Worker (工作 线程 ) 的 概念 ， 并 且 规 范 出 Web Worker 的 三 
大 主要 特征 : 能 够 长 时 间 运 行 (响应)， 理想 的 启动 性 能 以 及 理想 的 内 存 消耗 。Web Worker 
允许 开发 人 员 编 写 能 够 长 时 间 运 行 而 不 被 用 户 所 中 断 的 后 台 程序 ， 去 执行 事务 或 者 逻辑 ， 
并 同时 保证 页 面 对 用 户 的 及 时 响应 。 
17.4.1 Web Worker 的 工作 原理 


Web Worker 的 工作 原理 是 在 包含 JavaScript 脚本 的 Web 页 面 中 ， 运 行 的 JS 脚本 称 为 
主线 程 ， 并 在 主线 程 中 使 用 Worker 类 创建 一 个 Worker， 并 向 其 传 入 一 个 参数 ， 该 参数 是 
需要 在 另 一 个 线程 中 运行 的 JavaScript 文件 名 称 (myWorkerjs)， 然 后 在 这 个 实例 上 监听 
onmessage 事件 。 利 用 这 个 JavaScript 文件 来 运行 一 个 新 的 线程 ， 起 到 互 不 阻塞 执行 的 效 
果 。 主 线程 和 新 线程 之 间 数 据 交 换 可 通过 postMessage() 方 法 和 通过 onmessage 捕获 来 传递 
和 接收 数据 。 


17.4.2 创建 Web Worker 文件 


利用 JavaScript 创建 一 个 外 部 Web Worker 文件 myWorkerjs。 它 是 一 个 独立 的 JavaScript 
脚本 文件 。 主 要 功能 是 每 隔 1s 随机 产生 10 个 100 以 内 的 2 位 整数 ， 并 保存 在 数组 中 ， 并 
通过 postMessage() 方法 将 数组 元 素 传递 给 主线 程 。 其 调用 方法 如 下 : 

worker.postMessage (data) //data 可 以 是 一 个 字符 串 或 者 JSON 对 象 

编写 外 部 JavaScript 文件 ， 已 经 详细 注解 了 代码 的 功能 。 代 码 如 下 所 示 : 

/* myWorker.js， 每 隔 1s 随 机 产生 10 个 10 一 99 之 间 的 整数 */ 





var tenIntger=new Rrray() 7 // 定 义 保 存 随机 2 位 整数 的 数组 
function createTenIntger () { // 产 生 10 个 随机 整数 
for (var j=0;j<10;j++) // 循 环 10 次 


{ // 利 用 数学 函数 随机 产生 10~99 之 间 的 整数 ， 并 存 入 数组 中 
tenIntger[j]=Math.floor (Math.random()*90+10) 7 
} 
postMessage (tenIntger.sort ()); // 数 组 元 素 排序 后 传递 给 主线 程 
setTimeout ("createTenIntger ()",1000); // 每 隔 1s 重 新 产生 1 次 
} 
createTenIntger (); // 调 用 方法 


通常 情况 下 ，Web Worker 不 用 于 如 此 简单 的 脚本 ， 而 是 用 于 更 耗费 CPU 资源 的 任务 。 
17.4.3 ”创建 Web Worker 对 象 


编辑 完成 Web Worker 文件 后 , 需要 利用 Worker 类 创建 一 个 新 的 Worker 线程 ,并 为 其 
传 入 一 个 参数 ， 该 参数 就 是 myWorkerjs 文件 ， 从 而 实现 调用 。 代 码 如 下 所 示 : 


var worker = new Worker ("myWorker.js"); // 定 义 Worker， 并 传 入 参数 


通常 情况 下 ， 需 要 检测 一 下 Worker 对 象 是 否 存在 。 若 不 存在 ， 则 自动 创建 一 个 新 的 
Worker 对 象 ， 然 后 运行 myWorkerjs 中 的 代码 。 代 码 如 下 所 示 : 
if (typeof (worker)=="undefined"){ // 未 定义 ， 其 类 型 为 undefined 


worker=new Worker ("myWorker.js "); // 创 建 一 个 Worker 


} 


然后 就 可 以 从 Web Worker 发 送 和 接收 消息 。 为 Web Worker 对 象 添加 一 个 onmessage 
事件 监听 器 来 接收 消息 。 代 码 如 下 所 示 : 


worker.onmessage=function (event) { // 动 态 分 配 事件 属性 ， 并 绑 定 无 名 事件 处 理 函 数 
document .getElementById ("result") .innerHTML=event .data; 
// 将 接收 的 消息 显示 在 指定 的 标记 内 

. 

event.data 中 存放 来 自 新 线程 postMessage(data) 方 法 回 传 的 数据 data。 

当然 Worker 新 线程 也 可 以 通过 postMessage(data) 方 法 来 向 主线 程 发 送 数 据 、 绑 定 
onmessage 方法 来 接收 主线 程 发 送 过 来 的 数据 。 
17.4.4 终止 Web Worker 


由 于 Web Worker 不 能 自行 停止 , 但 是 启动 它们 的 页 面 可 以 通过 调用 terminate() 方 法 停 
止 它们 ， 并 释放 浏览 器 /计算 机 资源 。 代 码 如 下 所 示 : 

worker.terminate (); // 终 止 新 线程 

在 Web Worker 应 用 中 还 会 遇 到 同时 加 载 多 个 脚本 的 情况 ， 此 时 可 以 在 Worker 中 通过 
importScripts(url) 加 载 另 外 的 脚本 文件 ， 也 可 以 使 用 setTimeout() 、clearTimeout()、 
setInterval()、clearInterval() 等 方法 来 定时 或 周期 性 地 启动 或 停止 相关 代码 。 

【 例 17-4-1】HTML5 Web Worker 多 线程 实现 每 隔 1s 随机 产生 1 组 10 个 100 以 内 的 两 
位 整数 。 代 码 如 下 ， 页 面 效果 如 图 17-12 所 示 。 


回 加 
1 <== edu 17 4 1:htmnl 一 一 > > 
2 <!DOCTYPE html> 
3 <html lang="en"> 回 
4 <head> 视频 讲解 
5 <title>Web Worker 应 用 </title> 
6 <meta charset="UTF-8"> 
</head> 
8 <body> 
9 <h3> 随 机 产生 10 个 100 以 内 的 2 位 整数 : </h3> 
10 <p><output id="result"></output></p> 
11 <button onclick="startMyWorker () "> 开始 Worker- 每 秒 产 生 10 个 整数 
</button> 
证 有 <br/><button onc1lick="stopMyWorker () "> 停止 Worker</button> 
了 和 <script> 
14 Var worker; // 定 义 全 局 变量 
生生 function $ (id){return document .getElementById(id);} 
// 通 过 id 获取 对 象 
16 function startMyWorker(){ // 启 动 我 的 worker 
Ey if (typeof (Worker) !=="undefined") 
// 判 断 浏览 器 是 否 支持 Web Worker 
18 { 
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19 if (typeof (worker)=="undefined") // 判 断 worker 是 否 存在 
20 { 

21 worker=new Worker ("myWorker.js"); // 不 存在 则 创建 

2 } 

23 worker.onmessage = function (event) { // 捕 获 传递 的 消息 
24 $ ("result") .innerHTML=event .data; // 显 示 在 指定 的 标记 内 
2 } 

26 }elset{ / /浏览 器 不 支持 Web Worker 
$ ("result") .innerHTML=" 对 不 起 , 您 的 浏览 器 不 支持 Web Worker..."; 
28 

2 } 

30 function stopMyWorker () 1{ 

31 worker.terminate (); // 终 止 线 程 

32 } 

33 </script> 

34 </body> 

35 </html> 
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随机 产生 10 个 100 以 内 的 2 位 整 教 : 


17.21344848.56.66.87.8798 


随机 产生 10 个 100 以 内 的 2 位 整数 : 
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(a) 初始 状态 (b) 开始 线程 
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GEN 
随机 产生 10 个 100 以 内 的 2 位 整数 : 
1819.22.23.50.60.66.67.83.99 
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(c) 停止 线程 


图 17-12 HTMLS5 工作 线程 应 用 
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= 个 号 


17.S 


实 例 


利用 IndexedDB 实现 简易 图 书 管理 系统 。 页 面 设计 功能 要 求 如 下 。 实 现 页 面 内 容 、 页 
面 表现 与 行为 充分 分 离 。HTML 页 面 采用 HTMLS5 新 增 结构 标记 来 设计 ， 主 要 包括 header、 


section、nav、footer 等 标记 ， 设 计 三 个 导航 : 图 书 ; 


[总 、 添 加 图 书 、 系 统 设置 ， 采 用 三 个 





section 分 别 设计 三 个 不 同 的 用 户 界面 ， 页 面 效果 如 图 17-13 一 图 17-19 所 示 。 
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图 17-13 初始 界面 
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17-14 图 书 汇总 页 面 


(1) 图 书 汇总 页 面 。“ 检 索 图 书 ” 按 钮 功能 有 两 个 ;不 输入 任何 检索 内 容 时 ， 单 击 按 
钮 能 够 实现 检索 对 象 仓库 中 的 所 有 图 书 。 输 入 检索 内 容 时 ， 单 击 按钮 能 够 按 图 书 标题 检索 
相关 图 书 。 页 面 效果 如 图 17-15 和 图 17-16 所 示 。 
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图 17-15 未 输入 检索 内 容 检索 图 书页 面 图 17-16 输入 HTML 后 的 检索 图 书页 面 


(2) 添加 图 书页 面 。“ 添 加 图 书 ” 按 钮 功能 是 将 输入 的 图 书 标题 、 作 者 、ISBN 等 信息 
添加 到 对 象 仓库 books 中 。 页 面 效 果 如 图 17-17 和 图 17-18 所 示 。 
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17-17 添加 图 书 初始 界面 图 17-18 ”图 书 添加 页 面 


(3) 系统 设置 页 面 。 系 统 设置 页 面 中 设置 三 个 命令 按钮 ， 分 别 是 清除 所 有 图 书 、 清 除 
数据 库 、 数 据 库 初 始 化 。 其 中 “清除 所 有 图 书 ” 按 钮 功能 是 将 books 对 象 仓库 中 的 所 有 对 
象 全 部 删除 。“ 清 除数 据 库 ” 按钮 功能 是 将 整个 数据 库 (myBooks) 删除 。“ 数 据 库 初始 化 ” 





Web 育 帝 开交 老大 一 TINMT5、CSS3、JavaScript ( 荔 了 猎 ) 







功能 是 重新 初始 化 系统 ， 自 动 添加 五 种 图 书信 息 。 页 面 效果 如 图 17-19 所 示 。 
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图 17-19 系统 设置 页 面 


文件 命名 要 求 HTML 文件 为 edu_17 5_1.html，CSS 文件 为 books.css，JavaScript 文件 
为 mybooks.js。 
。 HTML 部 分 代码 。 


1 <!-- edu 17 5 1.html --> 
2 <!DOCTYPE html> 


3 <html> 

4 <head> 

5 <meta charset="UTF-8"> 

6 <title>IndexedDB 管 理 客户 端 数据 -简易 图 书 管理 系统 </title> 

了 <link type="text/css" rel="stylesheet" href="books.css" /> 

8 <script type="text/javascript" src="mybooks.js"></script> 

9 </head> 

10 <body calss="list"> 

了 全 <!--1 .采用 HTML5 设 计 页 面 内 容 --> 

12 <header> 

了 <h2> 简 易 客户 端 图 书 管理 系统 </h2> 

14 <nav> 

#5 <ul> 

16 <li><a id="al" href="#list" class="1ist"> 图 书 汇总 
</a></1i> 

3 <li><a id="a2" href="#add" class="add"> 添 加 图 书 </a> 
交大 生计 六 

18 <li><a id="a3" href="#setting" class="setting"> 系 统 设 
置 </a></1i> 

19 </ul> 

20 </nav> 

21 </header> 


22 <!-- 采用 3 个 section 设 计 3 个 不 同 的 导航 页 面 ”--> 


23 <section class="list"> 





24 <!-- 第 1 个 section 是 图 书 列表 清单 --> 
25 <form name="list"> 
26 <input type="search" size="30" name="query" placeholder= 
"请 输入 需要 查询 的 图 书 名 称 ” /> 
2 <input type="button" value=" 检 索 图 书 " onclick="showBooks ();"/> 
<br /> 
28 <textarea id="booklist" rows="8" ></textarea> <!-- 显示 查询 结 
果 --> 
29 </form> 
30 </section> 
31 <section class="add"> 
32 <!-- 第 2 个 section 是 图 书 添 加 --> 
33 <form name="add"> 
34 <fieldset> 
35 <legend align="center"> 图 书 基本 信息 </legend> 
36 图 书 标题 : <input type="text" name="title" autocomplete="true" /> 
<br/> 
37 作者 : <input type="text" name="author" autocomplete="true" 
required/> <br /> 
38 ISBN: <input type="text" name="isbn" autocomplete="true" 
pattern="[0-9] {13}" required /><br/> 
39 <input type="button" class="myButton" value=" 添 加 图 书 " 
onclick="addBook () "> 
40 </fieldset> 
41 </form> 
42 </section> 
43 <section class="setting"> 
44 <!-- 第 3 个 section 是 系统 设置 --> 
45 <form name="setting"> 
46 <input type="button" value=" 清 除 所 有 图 书 " class="myButton" 
onclick="deleteAllBooks();" /> 
47 <input type="button" value=" 清 除数 据 库 " class="myButton" 
onclick="deleteDatabase();" /> 
48 <input type="button" value=" 数 据 库 初 始 化 " class="myButton" 
onclick="loadBooks()" /> 
49 </form> 
50 </section> 
二 <footer> 
52 <p> 版 权 所 有 &copy;2017-2025 HTML5 创 意 与 推广 工作 室 </p> 
53 </footer> 
54 </body> 
55 </html> 


。 CSS 部 分 代码 。 


/* books.css */ 
/* 2 .表现 设 计 (定义 域 和 列表 框 样式 ) */ 
form {width: 400px;margin: 5px auto7 
height: 180px;border: lpx double #0066FF;padding: 20px;} 
form {text-align: center;} 
ul{list-style-type: none;text-align: center;} 
ul li {display: inline-block;width: 90px;} 
ul li a:link,ul li a:active, 
ul 1i a:visited { text-decoration: none;} 第 
ul li a:hover {border-bottom: 3px solid red;} 
h2 {height: 48px; text-align: center; background: #EAEAEA; 径 
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2 padding-top: 15px; Vertical-align: middle;} 
13 .myButton {margin: 20px auto; width: 100px; 
14 height: 30px; background: #DADADA;} 


15 /* 初始 时 所 有 section 均 不 可 见 */ 

16 section { display: none;} 

17 /* 当 body 和 section 具 有 相同 的 class 属 性 时 ，section 则 显示 */ 

18 body.list section.list,body.add section.add, 

19 body.setting section.setting {display: block;} 

20 footer {padding: Opx; margin: 0 auto; 

21 text-align: center; background: #DADADA;height: 40px;} 
22 p {padding-top: 1l0px; font-size: 16px;} 

23 #booklist{width:100%;} 


。 JavaScript 代码 。 


/* mybooks.js */ 
/* 3. 交 互 行为 设计 */ 
//3.1 系统 变量 初始 化 
var db = null; // 定 义 保存 数据 对 象 结果 集 的 变量 
var request,objStorel; 
var DBName = "myBooks", DBVersion = 1; // 定 义 数据 库 名 称 和 版 本 号 
var bookLists = [{ title: "Web 前 端 开发 技术 -Html、Css、JavaScript"， 
author: " 储 久 良 "， isbn: "9787302431695" 机 
title: "计算 机 组 成 原理 (修订 版 ) "， author: " 张 功 营 "， 
isbn: "9787302433637" ke 
{ ”title: "HTML/CSS/JavaScript 标 准 教程 "， 
author: "本 书 编 委 会 "， isbn: "9787121079344" 
{ ”title: "HTML+CSS 网 页 设计 与 布局 从 入 门 到 精通 "， 
author: " 温 谦 "， isbn: "9787115183392" x 
{ ”title: "Java 2 实用 教程 (第 5 版 ) "， 
author: " 耿 祥 义 "， isbn: "9787302464259 " js 
//3.2 浏览 器 的 支持 判断 
var indexedDB = window.indexedDB || window.mozIndexedDB || window. 
msIndexedDB || window.webkitIndexedDB; 
9 //3.3 定义 创建 indexedDB 数 据 库 的 方法 ， 并 监听 3 个 事件 
20 function createDB (dbName, dbVersion) { 
和 request = indexedDB .open (dbName, dbVersion); 
// 返 回 一 个 IDBrequest 对 象 
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22 request .onerror = function (event) { 

2 alert ("打开 数据 库 失 败 :" + event.target.errorCode); 

24 console.1og ("打开 数据 库 失败 :" + event.target.errorCode); 
25 } 

26 request .onsuccess = function(event) { 

2 alert ("打开 数据 库 成 功 !") ; 

28 //console.1og ("打开 数据 库 成 功 !") ; 

29 db = event.target.result; // 给 db 赋值 

30 var transl = db.transaction(["books"], "readwrite"); 
31 objStorel = transl.objectStore ("books") ; // 创 建 books 对 象 仓库 
32 

3 request .onupgradeneeded = function(event) { 

34 alert ("版 本 变化 ! "” +" 版 本 号 为 "” + event.newVersion); 

35 console.1og ("版 本 变化 ! " + event.newVersion); 

36 db = event.target.result; 


37 // 为 books 对 象 仓库 创建 事件 对 象 


38 //var transl = db.transaction (["books"],"readwrite") > 





39 if(!db.objectStoreNames.contains ("books") ){// 如 果 不 存在 ， 则 创建 

40 objStorel=db.createObjectStore ("books"，{keyPath: "isbn"}); 
// 创 建 对 象 仓库 

41 objStorel.createIndex ("by title", ‘title', {unique: false}); 

42 objStorel.createIndex( "by_author", "author '， {unique: false}); 

43 objStorel.createIndex ("by isbn", ‘isbn', {unique: true}); 

44 } 

45 loadBooks (); // 初 始 化 图 书 

46 window.location.reload(); 

47 window.location.hash = "#1list"; 

48 $ ("booklist") .value = 了 

49 } 

50 } 

51 //3.4 启动 创建 数据 库 事 件 处 理 程序 

52 createDB (DBName, DBVersion); // 数 据 库 初 始 化 

53 function $(id) { 

54 return document .getElementById (id) 

55 于 

56 

57 function loadBooks() { // 初 始 化 加 载 5 种 图 书 


58 $ ("booklist") .innerHTML = ""; // 加 载 前 先 清空 列 表 
59 alert (" 开 始 装载 图 书 . . . .") 





60 var trans=db .transaction ("books","readwrite"); 
61 var objStorel=trans.objectStore ("books"); 
62 for(var i = 0; i < bookLists.length; i++) { 
// 采 用 for 循 环 将 3 个 对 象 添加 到 指定 对 象 仓库 
63 Var request = objStorel .put (bookLists[i]); 
//put 存 在 则 更 新 ， 不 存在 则 添加 对 象 到 books 中 
64 request.onerror = function() { 
65 console.error(' 数 据 库 中 已 有 该 对 象 , 不 能 重复 添加 !! '); 
66 }; 
67 request.onsuccess = function() { // 控 制 台 输 出 或 某 个 HTML 标 记 内 输出 
68 console.1og(' 对 象 已 成 功 存 入 对 象 仓 库 中 ! ') 
69 //console.dir (request.value); 
70 Fs 
人 和 } 
2 
73 function showBooks () { // 显 示 所 有 图 书 
74 var query = document.forms.l1ist.query.value; 
中 $("booklist") .value = ""; ”// 加 载 前 先 清空 列表 
76 var transaction = db.transaction(["books"], "readonly"); 
// 为 books 定 义 只 读 事件 
Tr var objStore = transaction.objectStore ("books"); 
// 获 取 books 对 象 仓库 
78 var index = objstore.index ("by title") ; // 按 title 进 行 索引 
79 var range = IDBKeyRange.bound (query, query+"z"); // 生 成 范围 range 对象 
80 //alert (range.value); 
81 var result = (query.length > 0) ? index.openCursor (range) : index. 
openCursor (); 
82 Var i= 1; 
83 result.onsuccess = function(e) { // 打 开 索 引 游标 ， 启 动 成 功 监听 事件 
84 Var cursor = e.target.result; // 获 取 结 果 集 
85 if(cursor) { // 通 过 控制 台 输出 相关 信息 
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86 textl1 = 工 +T "-" + cursor.value.title + "," 十 
cursor.value.author + "," + cursor.value.isbn; 

87 $ ("booklist") .value +=text1 + "\n™” 

88 cursor -continue () // 下 移 游标 ， 和 迭代 执 行 

89 下 

90 } else { 

91 console.1og ("没有 检索 内 容 "); 

92 //$ ("booklist") .value = "没有 检索 到 所 需要 的 图 书 ! " 

93 } 

94 }; 

95 result.onerror = function(e) {console.1log ("检索 失败 ! ")}; 

96 } 


97 function addBook() { 
98 // 添 加 一 本 图 书 进入 客户 端 图 书库 


99 var title = document.add.title.value; 

00 Var author = document .add.author.value; 

01 var isbn = document.add.isbn.value; 

02 Var onebook = { 

03 title: title, 

04 author: author, 

05 isbn: isbn 

06 }; 

07 if(title.length > 0 && author.length > 0 && isbn.length > 0) { 
08 Var trans2 = db.transaction("books","readwrite"); 

09 var objStore2 = trans2.objectStore ("books"); // 获 取 books 对 象 仓库 
10 Var requestl1 = objStore2 .add (onebook); 

半生 trans2.oncomplete = function (event) { 

12 alert (" 图 书 成 功 添 加 ! 界面 即将 被 清空 ! ") ; 

13 document .forms.add.title.value = ""; 


14 document . forms .add.author.value 








15 document . forms .add.isbn.value = 
16 window.location.reload(); 

17 //location.hash="#1ist"; 

18 二 

19 } 

120 } 


121 function deleteDatabase() { 
22 if(indexedDB) { 





2 入 var deleteDB = indexedDB.deleteDatabase ("books"); 
24 deleteDB.onsuccess = function(e) { 

25 alert ("数据 库 删 除 成 功 ， 即 将 重新 初始 化 ..."); 

126 window.location.reload(); 

127 } 

128 } 

L209. } 

130 function deleteAllBooks() { 

了 Var transl = db.transaction("books", "readwrite") 
132 Var objStorel = transl.objectStore ("books"); 

和 33 objStorel.clear (); 

134 transl.oncomplete = function(e) { 

和 alert ("所 有 图 书 清除 成 功 ! "); 

136 } 

137 transl.onerror = function(e) { 

138 alert ("所 有 图 书 清除 失败 ! ") ; 


3 } 


140 window.location.reload(); 


141 } 

142 /* 监听 hashchange 事 件 ， 并 绑 定 事件 处 理 函 数 

143 根据 hash 值 ， 动 态 地 给 body 修 改 class 属 性 的 值 
144 完成 Section 随 导航 自动 切换 

145 */ 

146 window.addEventListener('hashchange', function() { 
147 switch(location.hash) { 

148 case "#add"™: 

149 document .body.className = "add"; 

150 break; 

351 case "#setting": 

152 document .body.className = "setting"; 
153 break; 

154 default: 

155 document .body.className = "list"; 
156 } 


157 }, false}? 


使 用 Chrome 浏览 器 查看 页 面 效 果 ， 并 使 用 开发 者 工具 ( 按 F12 键 )， 选 择 Application 
菜单 ， 从 左 侧 的 Storage 目录 中 选择 IndexedDB， 单 击 展开 对 象 仓库 books， 可 以 看 到 索引 
和 具体 的 存储 对 象 等 信息 ， 如 图 17-20 所 示 。 
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图 17-20 用 开发 者 工具 查看 mdexedDB 中 的 数据 


本 章 小 结 


本 章 介 绍 了 HTML5 的 一 些 需要 借助 于 JavaScript 脚本 来 完成 的 功能 ， 主 要 有 客户 端 
存储 Web Storage、 画 布 Canvas、 拖 放 Drag && Drop、 多 线程 Web Worker 等 。 通 过 大 量 的 
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示范 案例 讲解 了 在 实际 开发 中 如 何 运用 这 些 对 象 的 方法 和 属性 。 
重点 介绍 了 Web Storage 和 IndexedDB 等 客户 端 存储 技术 。 其 中 localStorage、 
sessionStorage 对 象 可 以 存储 少量 客户 端 数据 。 而 IndexedDB 数据 库 可 以 存储 大 量 客户 端 

HTMLS Canvas 通过 JavaScript 脚本 来 完成 绘图 。canvas 标记 本 身 并 没有 绘图 能 力 , 所 
有 的 绘制 工作 必须 在 JavaScript 内 部 完成 。 可 以 通过 多 种 方法 使 用 Canvas 绘制 路 径 、 盒 、 
圆 、 字 符 以 及 添加 图 像 。 

拖 放 (Drag 和 Drop) 是 一 种 常见 的 特性 ， 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 任 何 元 
素 都 能 够 拖 放 ， 只 要 设置 draggable 属性 为 true 即 可 。 

Web Workers 允许 长 时 间 和 运行 脚本 ， 而 不 阻塞 脚本 响应 单 击 或 者 其 他 用 户 交 互 ， 它 还 
允许 执行 长 期 任务 而 无 须 页 面 保持 响应 。 











练习 与 实验 
练习 17 
1， 选 择 题 
(1) 能 够 保存 localStorage 对 象 数 据 的 方法 是 〈 Ys 
A. localStorage.setItem(key,value) B. localStorage.getItem(key) 
C. localStorage.removeltem(key) D. localStorage.key(index) 
(2) 能 够 从 sessionStorage 对 象 中 读 取 数 据 的 方法 是 )s 
A. sessionStorage.setItem(key,value) B. sessionStorage.key(index) 
C. sessionStorage.removeltem(key) D. sessionStorage.getItem(key) 
(3) sessionStorage.key(index) 方 法 的 作用 是 ( 加 
A， 保存 数据 B. 读 取 数 据 
C. 得 到 某 个 索引 的 key D. 删除 单个 数据 
(4) HIML5 Canvas 对 象 的 默认 宽度 为 300px， 默 认 高 度 是 〈 )s 
A. 200px B. 300px C. 400px D. 500px 
(5) Canvas 绘图 是 借助 于 JavaScript 脚本 通过 ( ) 方法 进行 图 像 绘制 。 
A. getElementById() B. getContext("2d") 
C. fillRect() D. strokeRect() 


(6) 使 用 Canvas 绘制 圆 形 的 方法 是 
A. beginPath() B. arc(x, y, 100, 开始 角 度 ,结束 角度 , 绘制 方向 ) 


C. closePath() D. A、B、C 三 个 方法 依次 执行 
(7) 绘制 直线 的 方法 是 法 
A. moveTo(x,y) B. lineTo(x,y) GO D. arcTo() 


(8) 绘制 实心 文本 正确 的 方法 是 。”)。 
A. lineTo(x,y) B. moveTo(x,y) 


C. strokeText(text,x,y) D. fillText(text,x,y) 
(9) 在 设置 线性 渐变 时 至 少 需 要 指定 ( ”) 次 颜色 停止。 


A. 2 了 ae. 3 C. 4 如 .了 
(10) 绘制 图 像 裁剪 的 方法 是 (  ”)。 

A. drawImage(image,x,y) B. createPattem(image,type) 

C. clip0 D. drawImage(image,x,y,width,height) 
2. 填空 题 


(1) 在 指定 (x,y) 处 绘制 指定 宽度 为 width、 高 度 为 height 的 图 像 image 的 方法 是 

; 选择 从 指定 位 置 (sx,sy) 开 始 和 指定 宽度 

为 sw、 高 度 为 sy 的 区 域 ， 在 画布 上 指定 的 〈dx,dy) 处 绘制 宽度 为 lw、 高 度 为 dy 的 图 像 
image 的 方法 是 




















(2) 设置 放置 对 象 至 少 必须 通过 和 事件 属性 来 监听 是 否 允 许 拖 
放 和 放置 。 

(3) 要 使 图 像 img 标记 成 为 拖 放 对 象 ， 必 须 设置 属性 为 tue， 同 时 还 要 通 
过 事件 属性 (事件 句柄 ) 来 监听 dragstart 事件 。 

(4) 放置 对 象 必须 通过 事件 属性 来 监听 放置 事件 ， 并 绑 定 相关 事件 处 理 函 
数 接收 被 放置 的 对 象 。 

(5) Web Worker 对 象 可 以 通过 运算 符 来 创建 。 

(6) 创建 一 个 新 线程 《Worker)， 必 须 传 入 一 个 参数 ， 这 个 参数 是 文件 。 

(7) 在 主线 程 中 可 以 通过 给 Worker 对 象 添加 一 个 事件 属性 绑 定 事件 处 理 
函数 来 接收 新 线程 的 数据 ， 新 线程 可 以 通过 方法 向 主线 程 传递 数据 。 

(8) 线程 一 旦 创建 ， 不 能 自己 停止 ， 可 以 通过 方法 停止 新 线程 
运行 ， 并 释放 资源 。 

(9) Web 本 地 存储 常用 的 两 个 对 象 分 别 是 和 。 他 们 都 具有 相同 
的 方法 ， 分 别 是 

3. 简 答题 


(1) 两 个 Web 本 地 存储 对 象 在 使 用 中 有 什么 区 别 ? 
(2) 在 IndexedDB 中 ， 对 象 仓库 的 更 新 与 添加 方法 有 什么 区 别 ? 
(3) 简 述 Web Worker 的 工作 原理 。 主 线程 和 新 线程 之 问 是 如 何 进行 数据 交换 的 ? 


实验 17 


1. 运用 HIML5 Web 本 地 存储 设计 简易 手机 通讯 录 。 实 现 通讯 录 添 加 、 查 询 、 删 除 、 
重 置 等 功能 。 通 讯 录 内 容 为 姓名 、 电 话 。 页 面 效 果 如 图 17-21 所 示 。 

按钮 功能 设计 要 求 :“ 添 加 ”按钮 的 功能 是 将 用 户 在 表单 中 输入 的 合法 用 户 姓名 和 电 
话 添加 到 phone 对 象 仓库 中 ， 并 同时 添加 到 下 面 的 多 行文 本 域 中 。“ 查 询 ” 按 钮 的 功能 是 根 
据 用 户 在 姓名 中 输入 的 内 容 ,在 对 象 仓库 中 查询 ， 并 显示 在 “电话 ”对 应 的 文本 框 中 。“ 删 
除 ”按钮 的 功能 是 根据 用 户 在 姓名 中 输入 的 内 容 ， 查 找 对 应 的 对 象 ， 并 删除 ， 同 时 自动 更 





HTML5 高 级 应 局 


Web 育 帝 开交 故 大 一 TINMTI、CSS3、JavaScript ( 荔 了 猎 ) 






新 下 列 多 行文 本 框 中 的 通讯 录 。“ 重 置 ” 按 钮 的 功能 是 将 表单 中 输入 域 中 的 内 容 清空 。 

2. 使 用 IndexedDB 数据 库 实现 手机 通讯 录 管 理 功能 。 效 果 图 如 图 17-21 所 示 。 程序 设 
计 要 求 : 

(1) 创建 phoneInfo 数据 库 ， 创 建 phone 对 象 仓 库 ， 用 于 保存 每 个 用 户 的 通讯 信息 。 
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简易 手机 通讯 录 
| | 姓名 : 833333 

电话 : [1893214333 
[sn || | ||| [mn || | [ 帅 除 ]| 重 至] 
通讯 录 为 宇 …… 代 名 电话 


1 一 13923451111 
222222 ”一 15552342222 


姓名 : 
电话 : 
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图 17-21 简易 手机 通讯 录 管 理 程序 页 面 


(2) 手机 通讯 信息 结构 为 姓名 name、 电 话 phone。 

(3) 按钮 功能 参照 实验 17 第 1 题 中 的 要 求 。 

3. 上 机 实验 并 调试 【 例 17-3-1】HTMLS5 拖 放 图 像 应 用 中 的 全 部 代码 。 
4. 上 机 实验 并 调试 【 例 17-4-1】 中 的 全 部 代码 。 





附录 A 模拟 试卷 1 ( 120 分 ) 





一 、 选 择 题 (每 题 1 分 ， 共 30 分 ) 


确 的 是 


10. 


Ms 


.以 下 表示 HTML 文档 的 标记 是 )。 


A. <html></html> B. <JavaScript></JavaScript> 
人 D. <body></body> 


下 列 ( 语言 可 以 实现 网 页 交互 功能 。 
A. HIML B. CSS Cr@EE D. JavaScript 
.以 下 标记 中 用 于 设置 页 面 标题 的 是 和 
A. <html> B. <title> C. <head> D. <caption> 
下 面 《 ) 是 换行 符 标记 。 
A. <enter> B. <br> C. <font> D. <p> 
. 在 HTML 中 ， 标 记 <pre> 的 作用 是 )。 
A. 转行 标记 B. 标题 标记 C. 文字 效果 标记 D， 预 排版 标记 
下 列 不 属于 字体 <font> 标 记 属 性 的 是 〈 )。 
A. color B. face C. align D. size 


.以 下 关于 列表 标记 说 法 错误 的 是 由 


A，<ol> 有 序列 表 B. <ul> 无 序列 表 C. <dl> 定 义 列表 D，<li> 嵌 套 列表 


- 下 列 选项 表示 相对 路 径 的 是 〈 汽 


A. images/tu.gif B. ftp://219.11.65.123 
C. /root D. http://www.baidu.com 


. 图 像 名 为 myhome.jpg， 要 访问 目标 为 http://www.edu.cn， 以 下 创建 一 个 图 像 链接 正 


《 )。 
. <a href="http:/www.edu.cn" >myhome.jpg</a> 
. <a href="http://www.edu.cn" ><img src="myhome.jpg"> 
. <img src="myhome.jpg"><a href="http://www.edu.cn" ></a> 
<a href="http://www.edu.cn" ><img src="myhome.jpg"></a> 
在 CSS 文字 、 排 版 、 边 界 等 的 设置 上 ， 经 常用 到 长 度 单位 ， 下 列 是 相对 单位 的 是 


DNAwWr 








A. im B. pc C. cm D. px 
以 下 关于 <select> 标 记 说 法 正确 的 是 〈 )。 

人 A. <select> 定 义 的 表单 元 素 在 一 个 下 拉 菜 单 中 显示 选项 

B. rows 和 cols 属性 可 以 定义 其 大 小 

C. <select> 定 义 的 表单 元 素 是 一 个 单 选 按钮 
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D. <selec 亿 定义 的 表单 元 素 通 过 设置 multiple 属性 可 以 实现 多 选 
12. CSS 文件 的 扩展 名 为 四 
A. txt B. htm C. ess D. html 
13. 要 使 表格 行 高 为 18px， 以 下 方法 正确 的 是 为 
A. <table border="1" height="l8cm" ></table> 
B. <tr border="1" height="18pt" ></tr> 
C. <tr height="l8px" ></tr> 
D. <table border="1" height="18pc" ></table> 
14. 下 列 ( ) 选项 的 CSS 语法 是 正确 的 。 
A. body:color=black B. {body:color=black(body)} 
C. body{color:black;} D. 人 
边 距 属性 为 “上 边 距 : 20px、 下 边 距 : 30px、 左 边 距 ，40px、 右 边 距 :50px” 正 
确 的 oe 是 ( )s 
A. margin:20px 30px 40px 50px B. border: 20px 30px 40px 50px 
C. margin:20px 50px 30px 40px D. margin-top:20px 30px 40px 50px 
16. 在 JavaScript 中 ， 下 列 满足 变量 x 大 于 等 于 20 且 小 于 100 条 件 的 正确 表达 式 是 
C )。 





A. (X>=20 & x<100) B. (x>=20 and x<100) 
C. (X>=20 or x<=100) D. (x>=20 && x<100) 
17. 设 s1、s2 为 字符 变量 ，sl="How Are Youl" : s2="a"， 则 sl.indexOf(s2) 的 结果 是 
i S 
A. -1 B. 4 G3 D. 以 上 都 不 是 
引用 外 部 compute.js 脚本 正确 的 语法 是 )。 
A. <script hre 舍 "compute.js"> B. <style href="compute.js"> 
C. <script src="compute.js"> D. <style src="compute.js"> 
19. 下 列 声明 自 定义 函数 selectNumberO 正 确 的 是 ( je 
A. function : selectNumber(O{} B. function selectNumberO{ } 
C. function =selectNumberO{} D. function {selectNumber()} 
20. 下 列 选 项 中 ( ) 是 求 出 两 个 数 中 的 最 大 数 。 
A. Math.ceil(20,50) B. Math.max(20,50) 
C. Mathmin(20,50) D. top(20,50) 


21. HTMLS5 的 正确 doctype 格式 是 ( 活 
A. <IDOCTYPE html> 
B. <!DOCTYPE HTML5> 
C. <IDOCTYPE HIML PUBLIC "-//W3C/DTD HIML 5.0/EN" "http:/www- 
WwW3.org/TR/htmls/strict.dtd"> 
D. <!DOCTYPE html5> 
22. 在 HIML5 中 ， 属 于 组 合 标题 元 素 的 是 〈 )。 
A. <group> B. <hgroup> C. <headings> DD. <header> 


23. 用 于 播放 HIMLS 音频 文件 的 正确 HTMLS5 元 素 是 ( 天 





A. <media> B. <audio> C. <video> D. <movie> 
24. 在 HTML5 中 ， 为 输入 字段 提供 占 位 符 〈 提 示 信 息 ) 的 属性 是 入 

A. required B.formvalidate C. validate D. placeholder 
25. 下 列 输入 类 型 用 于 定义 周 和 年 控件 (无 时 区 ) 的 是 ( js 

A. date B. week C. year D. time 
26. 下 列 属性 中 表示 CSS3 的 过 渡 的 属性 是 ( 。”)。 

A. animation B. transform C. transition D. box-shadow 
27. 下 列 属性 中 能 够 设置 圆 角 边框 的 属性 的 是 ( )。 

A. box-shadow B. border-image C. border-style D. border-radius 


28. 下 列 选项 中 定义 动画 animation 的 关键 帧 的 是 ( )。 
A. @keyframes B. keyfrmaes C. @importurl() D. @keyframe 
29. 能 够 保存 localStorage 对 象 数 据 的 方法 是 〈 六 


A. localStorage.setItem(key,value) B. localStorage.getItem(key) 

C. localStorage.removeltem(key) D. localStorage.key(index) 
30. 使 用 Canvas 绘制 圆 形 的 方法 的 是 〈 yo 

A. beginPath() B. arc(x, y, 100， 开始 角度 ,结束 角度 ,绘制 方向 ) 

C. closePath() D. A、B、C 三 个 方法 依次 执行 


、 填 空 题 (每 空 1 分 ， 共 20 分 ) 
. HTML 中 标记 分 为 两 种 : 一 种 _(Q) 标记 ， 另 一 种 是 _ (2) _ 标记 。 
. 在 HTML 文件 里 ， 版 权 符号 的 控制 代码 是 _(3》_。 
.<fon 人 标记 常用 的 属性 有 3 个 ， 分 别 是 color、_(4) 、_(5〉 (以 首 字母 排序 ) 。 
.要 实现 超 链 接 在 新 窗口 中 打开 日 标 网 页 需要 将 target 属性 值 设置 为 _(6) 
. 将 表格 的 标题 设置 为 “课程 成 绩 表 ”的 完整 HTML 语句 (利用 表格 标记 ) 是 _7)_。 
.浮动 框架 一 般 使 用 在 < _(8〉_ > 标记 中 ， 用 于 在 其 中 打开 超 链接 。 
. 定义 一 个 表单 元 素 普通 按钮 ， 可 通过 <input type=_(9) name="select" id="select" 
/> 来 定义 。 
8. CSS 中 类 选择 符 用 _(10〉 来 表示 ，ID 选择 符 用 _ (1) 来 表示 。 
9. 定义 一 个 变量 today 为 日 期 对 象 语句 是 _(12)〉_。 
10. Math.round(Math.random()*100) 产 生 的 数据 范围 是 _(13) 
11. CSS 中 样式 表 的 定义 有 4 种 , 分别 是 行内 样式 表 、_ (4) 、_(15) 、_(16) 。 
12. 插入 背景 音乐 可 使 用 标记 (7) (不 使 用 bgsound 标记 )。 
13. 设置 表格 跨行 的 属性 是 _ (8) 
14. 加 载 名 为 imagel.gif 图 像 可 在 <img> 标 记 中 这 样 设置 _ (19) _ ="imagel.gif"'。 
15. 使 无 序列 表 的 列表 项 符号 显示 为 “O” 可 通过 <ul type="_(20) "> 实现 。 
三 、 看 图 编程 (每 空 2 分 ， 共 46 分 ) 
1. 执行 下 面 程序 ， 并 在 浏览 器 中 打开 ， 效 果 如 图 A-1 所 示 ， 根 据 网 页 呈现 的 信息 ， 
完善 代码 。 
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介 交 章 
图 A-1 JavaScript 初步 应 用 
<html> 
<head> 
<title> (1) </title> <!-- 写 上 标题 --> 
</head> 
<body> 
<script type="text/javascript"> 
(2) // 提 示 信 息 如 图 A-1 所 示 
</script> 
</body> 
</html> 
2. 按 如 图 A-2 所 示 的 页 面 效 果 和 代码 中 注释 部 分 的 提示 信息 完善 程序 代码 。 
pe I mm le 
C | @ filey//E/ 斌 郑 库 /2011_2012_2_11 软 件 廊 | 全 
web 前 端 开发 技术 
1.HTML 
2.CSS 
图 A-2 ”标题 字 应 用 
<html> 
<head> 
<title> 标题 字 应 用 </title> 
</head> 
<body> 
(3) <!-- 3 号 标题 --> 
(4) <! 一 水 平 线 大 小 : 3， 颜 色 : 红色 ， 对 齐 方式 : 居中 --> 
(5) <!-- 4 号 标题 显示 "1 .HTML” --> 
(6) <!-- 5 号 标题 显示 "2 .CSS ”--> 
<h6>3.JavaScript </h6> <!-- 6 号 标题 显示 "3 . JavaScript ” --> 
</body> 
</html> 


3. 按 如 图 A-3 所 示 的 页 面 效 果 和 代码 中 注释 部 分 的 提示 信息 完善 程序 代码 。 








A-3 自 定义 列表 与 CSS 


<html> 
<head> 
<title> 自 定义 列表 与 CSS </title> 
<style type="text/css"> /* 定 义 样式 表 的 开始 标签 */ 
dl{ _(7) ;  /* 定 义 背 景 颜色 为 #99ff99*/ 
width:200px;height:150px; 
border:_(8) _;}  /* 定 义 边框 为 2px、 双 线 、 颜 色 为 #4ff3333*/ 
dt{font-size:28px;color:red;font-weight:bold;} 
dd{ color:green; (9) ;  /* 定 义 字 大 小 为 24px*/ } 
</style> 
</head> 
<body> 
(10) <!-- 自 定义 列表 --> 
(11) ”<!-- 定 义 列表 项 目 为 "软件 工程 ” --> 


<dd>Web 程 序 设 计 </dd> 
<dd> 数 据 库 原 理 </dd> 
<dd> 计 算 机 网 络 </dd> 
</dl> 
</body> 
</html> 


4. 按 如 图 A-4 所 示 的 页 面 效果 和 代码 中 注释 部 分 的 提示 信息 完善 程序 代码 。 
程序 功能 : 单 击 “ 投 注 ” 按 钮 随机 产生 1 注 福利 彩票 号 码 ， 每 1 注 号 码 由 8 个 01 一 30 
之 间 的 整数 构成 ， 单 击 “ 清 空 ”按钮 ， 将 文本 框 清空 。 








21 17 07 18 14 29 30 04 

















图 A-4 福利 彩票 投注 助手 Wy 
A 
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<html> 
<head> 
<title> 福利 彩票 投注 助手 </title> 
<style type="text/css"> 
div{background:url ("ico 71.gif") left top no-repeat; 
width:450px; height:150px; margin:100px auto; border:2px dotted 


#f£f£3300; 
(12) ; /* 图 层 的 文字 内 容 的 颜色 为 白色 ， 值 用 英文 颜色 名 */ 


} 
form{ margin:0 auto;} 
table{margin:0 auto; _(13) ; /* 13 表 格 的 字体 样式 为 粗 体 */} 
h2{font-size:24px;text-align:center;} 
</style> 
<script type="text/javascript"> 
function selectnumber (num) { // 彩 票选 号 助手 
var number=new Rrray() ; //number 定 义 为 数组 
Var temp=Math.floor (Math.random()*30+1) 7 
for (i=0; (14) ?i++ ) // 产 生 8 个 01 一 30 之 问 的 整数 ， 补 充 循 环 判断 表达 式 


{ 
for (var j=0;j<number.length ;j++ ) 
{// 去 除 重复 号 码 
if (temp==number[j]) 


{ 
temp=Math.floor (Math.random()*30+1); 


j=0; 
} 
} 
number [i]=temp; // 下 舍 入 
if (number[i]<10) { (15) ___;}// 如 果 数 组 元 素 的 值 小 于 10， 加 上 前 导 "0" 
} 
(16) .value=number.join(" ");// 通 过 ID 号 获取 number1 文 本 框 对 象 ， 并 将 
// 计 算 结果 赋值 给 它 


} 
</script> 
</head> 


<body> 
<div id="" class=""> 


<h2> 福 利 彩票 投注 助手 </h2><br><br> 
<form method="post" action=""> 
<table> 
<tr> 
<td> 彩 票 号 码 </td> 
<!-- ”17 设置 humberl 文 本 框 为 只 读 --> 
<td><input type="text" name="numberl" size="28" id="numberl" (17) > 


</td> 





<!-- 18 事 件 句柄 与 事件 代码 绑 定 --> 
<td><input type="button" value=" 投 注 " onclick=" 
<input type="reset" value=" 清 空 "> 
</td> 

</tr> 

</table> 

</form> 
</div> 

</body> 
</html> 


(18) ;"> 


$5. 按 如 图 A-s 所 示 的 页 面 效 果 ， 完 


善 程序 代码 (10 分 )。 





由 HTML5 页 元 素 input 和 


x 训 


C | © filey//F/Web 前 并 : 








| 请 选择 课程 v 











注释 : 除了 IE9 和 更 早 版 本 的 正 浏览 器 以 及 Safari 
不 支持 datalist 标 记 ， 其 余 均 支持 。 





六 HTML5 页 面 元 素 input 和 X Ey 
C |@ filey//F/Web 前 端 开 ; 六 | 守 











| 请 选择 课程 v 








HTML5 移 动 应 用 开发 
-NET 应 用 开发 
JavaEE 应 用 开发 


太 的 IE 浏览 器 以 及 Safari 
余 均 支持 。 


PHP+ MysQL 应 用 开发 





图 A-5 input 类 型 与 数据 列表 关联 


填充 说 明 : (19) 列表 属性 ;(20) 设置 输入 域 占 位 符 ;(21) 数据 列表 标记 ; (22) 与 
input 标记 关联 的 属性 ，(23〉 显示 带 有 记号 的 文本 。 


<!doctype html> 
<html lang="en"> 
<head> 


<meta charset= 


人 于 本 和 六 > 


<title>HTML5 页 面 元 素 jnput 和 datalist 标 记 的 应 用 </title> 


</head> 
<body> 
<input _ (19) ="courese" 
< X21 (22) ="courese"> 


(20) =" 请 选择 课程 "” /> 


<option value="HTML5 移 动 应 用 开发 "> 
<option value=" .NET 应 用 开发 "> 

<option value="JavaEE 应 用 开发 "> 
<option value="PHP+MySQL 应 用 开发 "> 





datalist 标 记 ， 其 余 均 支持 。</p> 


SF M2ILY 和 
<p> (23) 注释 : 
</body> 
</html> 


四 、 编 程 题 (12 分 ) 


1， 表格 编程 (6 分 )。 
按照 如 下 要 求 编程 实现 表格 ， 如 图 A-6 所 示 。 
(1) 表格 标题 为 “教材 表 ”; 
(2) 表格 边框 宽度 为 1、 居 中 对 齐 、 宽 度 400px、 边 框 颜 色 为 黑色 ; 

(3) 单元 格 样式 为 内 容 水 平 居中 、 字 体 样式 为 “ 粗 体 ” 采用 内 部 样式 表 定义 ; 
(4) 表格 第 4 行 需要 进行 单元 格 合并 操作 。 


(23) 除了 IE9 和 更 早 版 本 的 IE 浏览 器 以 及 Safari 不 支持 


















































教材 表 
序号 教材 名 称 数量 (本 ) 
1 软件 工程 64 
数据 结构 54 
合计 118 
图 A-6 教材 表 
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2. JavaScript 编程 (6 分) 

按 下 面 要 求 编程 实现 找 出 1000 以 内 所 有 的 平方 数 ( 例 4=2*,，9=3*?， 16=4 ，……: ， 则 
4、9、16 等 为 平方 数 )， 并 计算 累加 和 ， 每 行 输出 10 个 数据 。 采 用 for 循环 结构 实现 计算 
累加 和 ， 效 果 如 图 A-7 所 示 。 


找 出 1000 以 内 的 平方 数 ， 并 计算 累加 和 


1000 以 内 的 平方 数 有 : 

149 1 25 36 4 64 8l 100 

121 144 169 196 225 256 289 324 361 400 
441 484 529 576 625 676 729 784 841 900 


961 
1000 以 内 的 平方 数 有 31, 其 累加 和 为 10416 





图 A-7 提示 信息 框 界面 


五 、 问 答题 (12 分 ) 

1. 举例 说 明 HTML5 文档 的 组 成 结构 。(5 分 ) 

2. 写 出 HTML、CSS、JavaScript 三 大 部 分 程序 注释 的 方法 。(4 分 》 
3. JavaScript 关于 标识 符 命名 的 规定 是 什么 ? (3 分 ) 





附录 B 模拟 试卷 2 ( 120 分 ) 





一 、 选 择 题 (每 空 1 分 ， 共 30 分 ) 
1. 以 下 标记 中 ， 用 于 设置 页 面 标题 的 是 ( 


A. <html></html> B. <head></head> 

C. <caption></caption> D. <title></title> 
2. CSS 文件 后 级 名 通常 为 ( )。 

和 A. *#html 或 #.htm B. *.js C. *.Css D. +*.txt 
3. 以 下 标记 中 可 以 导入 外 部 样式 表 的 标记 的 是 尖 

A. <script></script> B. <style></style> 

C. <link> D. <form></form> 
4. 下列 能 够 实现 页 面 样式 与 内 容 相 分 离 的 语言 是 〈 )。 

A. CSS B. JavaScript C. VFP D. HIML 
5. 下 列 代码 中 设置 4 号 标题 字 正 确 的 语句 是 ( )。 

A. <h4>Web 页 面 设 计 </h4> B. <h*x> Web 页 面 设计 </h*> 


C. <font size=4>Web 页 面 设计 </font> D. <h size=4> Web 页 面 设计 /h4> 
6. 下 列 具 有 字体 加 粗 功 能 的 标记 是 (。”)。 

















A. <font></font> B. <b></b> 
C. <pre></pre> D. <center></center> 
7. 以 下 关于 文本 格式 标记 描述 正确 的 是 ( )。 
A. <b> 和 斜体 标记 B. <p> 定 义 列表 标记 
C. <del> 删 除 线 标 记 D. <sub> 设 置 上 标 
8. 超 链 接 的 target 属性 值 为 〈 ) 时 可 以 在 父 窗口 中 打开 目标 网 页 。 
A. _self B. _blank C. top D. _parent 
9. 使 单元 格 中 的 内 容 垂 直 居 中 对 齐 的 正确 标记 是 〈 
A. <tdvalign="middle"> B. <td valign="top"> 
C. <td align="middle"> D. <td valign="bottom"> 
10. 以 下 标记 中 用 于 定义 表单 中 文本 域 的 标记 是 » 
A. <table> </table> B. <input type="textarea"> 
C. <caption></caption> D. <textarea></textarea> 


11. 以 下 关于 <select> 标 记 说 法 正确 的 是 〈 )。 
A. rows 和 cols 属性 可 以 定义 其 大 小 
B. <selecf> 定 义 的 表单 元 素 通过 设置 multiple 属性 可 以 实现 多 选 


Web 到 吏 开 医 蕉 大 一 一 HTML5、CSS3、JavaScript ( 席 3 挨 ) 





C. <select> 定 义 的 表单 元 素 是 一 个 单 选 按钮 

D. 单独 使 用 <selec 人 标记 就 可 以 生成 下 拉 列 表 框 
12. 设置 浮动 框架 名 称 的 属性 是 2 

A. src B. width C. height D. name 
13. 在 DOM 中 通过 对 象 id 访问 对 象 的 正确 方法 是 〈 和 

A. document.getElementsById("1d") 

B. document. getElementsByName ("name ") 

C. document.getElementById("id") 

D. document.getElementsByTagName ("tagname ") 
14. 通过 ( ) 属性 可 以 设置 字符 间距 。 

A. letter-spacing B. text-indent C. cellspacing D. cellpadding 
15. 下 列 JavaScript 语句 中 能 正确 执行 的 是 )。 

A. document.printf("Welcome to You!"); 

B. varx=5;if (x) {alert("Hello World! ");} 

C. varz,if: 

D. {var x=4,y=9;alert("Hello World! "); 
16. 在 JavaScript 中 ， 下 列表 示 返 回 函 数 运行 结果 的 语句 是 





A. retum; B. document.write(number); 

C. alert(number); D. retum number; 
17. 在 CSS 中 设置 属性 的 值 为 "none"， 可 以 去 除 超 链接 的 下 面 线 效果 。 

A. line-through B. text-transform 

C. text-decoration D. text-indent 
18. 下 列表 达 式 的 计算 结果 为 真 的 是 

A. (10>-1) && (null=—undefined) B. false && true 

C. (true llfalse) &&( ! true) DD, == "8 
19. 下 面 选项 表示 绝对 路 径 的 是 〈 )。 

A. www.sina.com.cn B. ftp://219.153.40.150/software/ 

C. ../ahtml D. /ahtml 
20. 下 列 标识 符 命名 合法 的 是 

A. switch B. ltrmue C. 于 D. $mail 123 
21. HTML5 之 前 的 HTML 版 本 是 ( 中 

A. HIML4.9 也 HIML4 C. HIML4.01 D. HTIML4.1 
22. 用 于 播放 HIMLS 视频 文件 的 正确 的 HIMLS 元 素 是 ( )。 

A. <media> B. <audio> C. <video> D. <movie> 
23. 在 HIML5 中 ， 规 定 输入 字段 是 必 填 的 属性 是 法 

A. required B. formvalidate C. validate D. placeholder 
24. 下 列 HTMLS5 元 素 用 于 显示 已 知 范围 内 的 标量 测量 的 是 ys 

A. <gauge> B. <range> C. <measure> DD. <meter> 


25. 从 sessionStorage 对 象 中 删除 数据 的 方法 是 〈 hs 


A. sessionStorage.setItem(key,value) B. sessionStorage.key(index) 
C. sessionStorage.removeltem(key) D. sessionStorage.getItem(key) 
26. HTML5 Canvas 对 象 的 默认 宽度 为 300px， 默 认 高 度 是 ( 
A. 200px B. 300px Le oe D. 500px 
27. Canvas 绘图 是 借助 于 JavaScript 脚本 通过 ) 方法 进行 图 像 绘制 。 
A. getElementById() B. ER 
C. fllRectO D. strokeRect() 
28. 绘制 圆 弧 的 方法 是 ( 。 )。 
A. moveto(x,y) B. lineTo(x,y) C. arc0 D. arcTo0 
29. 在 设置 线性 渐变 时 至 少 需要 指定 〈 ) 次 颜色 停止。 
A. 2 B. 3 C. 4 BD: 1 
30. 下 列 选项 中 ， 能 够 按 指 定 宽度 和 高 度 绘 制图 像 的 方法 是 站 
A. drawImage(image,x,y) B. createPattem(image,type) 
C. clipO D. drawImage(image,x,y,width,height) 
、 填 空 题 (每 空 1 分 ， 共 20 分) 
. HTML 文档 结构 是 由 _QD_ 和 两 部 分 构成 ia 
.在 JavaScript 中 将 赋值 语 名 le et 赋值 语句 _(3) _ 
. <font> 标 记 常 用 的 属性 有 3 个 ， 分 别 是 color、_ (4) 、_ (5) wbl 
.有 序列 表 <ol> 的 type 属性 的 取 值 有 _(6) 种 。 
. 在 HIML 文件 中 ， 超 链接 可 以 分 为 内 部 链接 和 __(7) 
. 表格 的 标题 可 以 使 用 _(8》 标记 来 设置 ， 页面 标 题 是 使 用 <tile></title> 标 记 来 设置 。 
. 在 <form> 中 设置 一 个 文件 选择 按钮 必 ei type 属性 为 “_ C9) _”。 
.CSS 规则 中 的 声明 部 分 是 由 _Q0〉 和 _ (11) 两 部 分 构成 。 
. 要 将 数组 num 中 所 有 成 员 讨 可 以 使 用 的 方法 是 num. (12), 
.在 p{background:#FF00FF;} 这 个 样式 中 背景 颜色 使 用 _(13)〉 表示 方法 。 
. CSS 样式 优先 级 从 低 到 高 分 别 是 _Q14) 、_ (15)、_(16) 、 行 内 样式 。 
.字符 串 str="JavaScript 易学 ! "， 则 str.indexOK"S") 结 果 是 _ (17) 
. 在 CSS 中 ， 定 义 JID 样式 的 开始 符 是 (18》 listl {list-style-type:none;}。 
. Math.min(100,200,-300) 的 结果 为 _(19)〉_。 
。 函数 parseFloat("2014-12-14") 的 值 是 _(20) 
、 看 图 编程 (每 空 2 分 ， 共 46 分 ) 
. 按 如 图 B-1 所 示 的 页 面 效 果 ， 完 善 程序 代码 (4 分 )。 
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最 后 一 次 登 月 42 周 年 : 为 何 美国 未 重 返 月 球 


新 浪 科 技 讯 北京 时 间 12 月 16 日 消息 ， 据 美国 科学 网 站 io9. com 报 道 ， 刚 
全 中 信人 全 导语 次 登陆 月 球 和 2 周年 纪念 日 。1972 年 12 月 11 

， 美 国 阿波 罗 17 号 在 月 球 表面 着 陆 。 这 不 仅 是 人 类 最 后 一 次 载 人 登 月 ， 也 
是 久 关 最 局 次 离开 低地 球 轨道 








图 B-1 简易 Web 页 面 
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填充 说 明 : (1) 设置 居中 显示 ; (2) 段 首 空 4 个 空格 。 


<html> 
<head> 
<title> 最 后 一 次 登 月 42 周 年 :为 何 美国 未 重 返 月 球 </title> 
</head> 
<body> 
<h2 _ (1) ”> 最 后 一 次 登 月 42 周 年 : 为何 美国 未 重 返 月 球 </h2> 
<p> (2) ”新浪 科技 讯 北京 时 间 12 月 16 日 消息 ， 据 美国 科学 网 站 io9 . com 报道， 刚刚 过 
去 的 12 月 11 号 是 人 类 最 后 一 次 登陆 月 球 42 周 年 纪念 日 。1972 年 12 月 11 日 ， 美 国 阿波 罗 17 号 
在 月 球 表面 着 陆 。 这 不 仅 是 人 类 最 后 一 次 载 人 登 月 , 也 是 人 类 最 后 一 次 离开 低地 球 轨道 . </p> 
</body> 
</html> 


2. 按 如 图 B-2 所 示 的 页 面 效果 ， 完 成 代码 填充 (8 分 )。 


i [Eee] 


C | @ fileV//FVWeb 前 端 开发 技术 -第 3 版 -20170518/ 玫 学 守 例 及 资源 /ch5/edu_5_4_l.htm 从 | 多 

















浮动 框架 应 用 





























图 B-2 ” 超 链 接 与 浮动 框架 应 用 


填充 说 明 : (3) 设置 字体 大 小 为 28px; (4) 设置 边界 上 下 为 0、 左右 为 自动 ; (5) 设 
置 右边 的 浮动 名 称 为 rigtiframe; (6) 设置 超 链接 在 右边 的 浮动 框架 中 打开 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 浮 动 框架 应 用 </title> 
<style type="text/css"> 
a{width:300px;margin:0 10px;} 
h3{__(3)_ ;color:#0000ff; text-align:center;} 
div{_ (4) ;text-align:center;} 
</style> 
</head> 


<body> 
<div id="" class=""> 
<h3> 浮 动 框架 应 用 </h3> 


<hr color="red"> 


<iframe name="leftiframe" src="http://www.njust.edu.cn" width="300" 
height="300" ></iframe> 


&nbsp; gnbsp; 


<iframe (5) _ src="https://www.nju.edu.cn/" 


marginwidth="10px"></iframe> 
<p><a href="http://www.gov.cn"” target="leftiframe"> 在 左边 浮动 框架 内 显示 中 


央 人 民政 府 网 站 </a> 


<a href="http://www.moe.gov.cn/" 


示 教 育 部 网 站 </a></p> 
</div> 
</body> 
</html> 


3. 按 如 图 B-3 所 示 的 页 面 效 果 ， 完 成 代码 填充 (12 分 )。 


mm 


2016-2017-1 学 期 成 绩 表 


width="300" height="300" 








_ (6) ="rigtiframe"> 在 右边 浮动 框架 内 显 








课程 成 绩 








大 学 英语 


Java 程 序 设计 | Web 前端 开发 技术 








1109520198 


75 


35 


76 








1109520199 


























60 





89 








66 


























图 B-3 


学 期 成 绩 表 


填充 说 明 : (7) 行 垂 直 居 中 ; (8) 字体 粗细 属性 ; (9) 表格 边框 颜色 ; (10) 行 水 平 
居中 ; (11) 跨 3 列 居中 ; (12》 应 用 样式 ， 不 及 格 显示 为 红色 。 


<html> 
<head> 


<title> 表格 应 用 </title> 
<style type="text/css"> 


tr{text-align:center; vertical-align: 


td{__(8) :bold} 


__ (7) ;height:18px;} 


.red{color:red;} /* 成 绩 不 及 格 为 红色 */ 
</style> 
</head> 
<body> 
<table _(9) _ ="#000011" border="1" width="500px" height="150px"> 


<caption><font face=" 黑 体 " size="3" color="#000000">2016-2017-1 学 期 成 
绩 表 </font></caption> 


‘<tr ~ (10). 三 


<td rowspan="2"> 学 ”号 </td> 


<td rowspan="2"> 姓 名 </td> 
<td (11) ”> 课程 成 绩 </td> 


秦 放 研 准 2 (120 分 ) 


附 
录 
B 


Web 育 开 阁 故 大 一 TIMTI、CSS3、JavaScript ( 澳 3 把) 





</tr> 
St 
<td> 大 学 英语 </td> 
<td>Java 程 序 设计 </td> 
<td>Web 前 端 开发 技术 </td> 
</tr> 
<tr> 
<td>1109520198</td> 
<tqd> 李 婷 罪 </tqd> 
<td>75</td> 
<td _ (12) _ >35</tqd> 
<td>76</td> 
Cyt 
<tr> 
<td>1109520199</td> 
<td> 张 华 伟 </td> 
<td>60</td> 
<td >89</td> 
<td>66</td> 
</tr> 
</table></body> 
</html> 


4. 按 图 B-4 所 示 的 页 面 效果 ， 完 成 代码 填充 (12 分 )。 





OTs 9 p- cx| Suneenzntnn : "I 
计算 ZN! 
输入 整数 N 的 值 : 10 





EN! = 4037913 








计算 ZN! 清空 

















图 B-4 Web 页 面 
填充 说 明 : 〈13) 调用 外 部 sum_factorialjs ; (14) 累加 和 文本 框 只 读 ; (15) 定义 为 
按钮 ; (16) 计算 累加 和 赋值 语句 ，(17) 调用 函数 计算 累加 和 ; (18〉 输 出 累加 和 。 


<html> 
<head> 
<title> 利用 外 部 函数 实现 计算 ZN ! </title> 
<script type="text/javascript" _(13) _ ></script> 


<style type="text/css"> 
table{width:500px;height:200px; cellspacing:0px; 
margin:0 auto;border:2px solid #339933 ; } 
td{font-size:20px; font-weight:bold;text-align:center;} 
#button{width:120px;height:30px;} 
</style> 
</head> 
<body> 
<form method="post" action=""> 
<table > 


<tr><td colspan=2> 计 算 7N! </td></tr> 


<tE> 


<td> 输 入 整数 N 的 值 : </td> 


<td><input type="text" name="" id="n text"></td> 


</tr> 
<tr><td>7N! =</td> 
<td><input type="text" name="" id="sum text" (14) ></td> 
</tr> 加 四 - 
Et 


<td colspan="2"> 
<input id="button" _ (15) type="button" value=" 计 算 7N! 
i show () ;">gnbsp; gnbsp; 
<input id="button" type="reset" value="&nbsp;&nbsp; 清 空 &nbsp; 
&nbsp; "> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
// 以 下 是 外 部 JS 文 件 名 为 sum_factorial.js 
function compute sum(n){ 
Var result=1, sum=0; 
for (i=1l;i<=n;i++ ) { 
result*=i; 
_ (16) _; // 累 加 和 } 


return sum; 








} 
function show() { // 显 示 累 加 和 的 函数 


Var n=parseFloat (document .getElementById("n text") .value); 


// 取 文 本 框 的 值 
var sum= _(17) ; // 阶 乘 计 算 累 加 和 
document .getElementById("sum text") .value= (18) _;// 向 累加 和 文本 框 赋值 


return; // 结 束 函 数 } 
5. 按 如 图 B-5 所 示 的 页 面 效 果 ， 完 善 程序 代码 (10 分 )。 








[ Css3 20 名 扫地 和 . 纹 ; x 
专 全 C | @ file/W/FVWeb 前 端 开发 技术 -第 3 版 -20170518/ 到 学 圭 例 及 资源 /ch13/edu_13.6_.5html 女 | 多 











5SS3 2D 转 换 -缩放 、 扭 曲 、 甜 阵 






















































































B-5 教学 反馈 表 





填充 说 明 : (19) (图 层 1) 放大 (1.5 倍 ); (20) (图 层 2) (X 轴 、Y 轴 方 向 ) 扭曲 | 附 
(30”); (21) 2D 甜 阵 转换 ;(22) 垂直 居 顶 部 对 齐 ; ((23) 给 图 层 3 应 用 #div3 样式 。 录 


秦 胡 研 痊 2 (120 分 ) 


Web 弦 开 阁 故 大 一 TINMTI、CSS3、JavaScript ( 筑 3 族 ) 





<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>CSS3 2D 转 换 -扭曲 、 缩 放 </title> 
<style type="text/css"> 
div{width:100px;height:50px;background:#dadada;border:1lpx solid 
#00cc66; } 
#divil{ _ (19) _ (1.5,1.5);margin:1l0px auto;} 
#div2{ (20)__ (30deg,30deg) ;margin:10px auto;} 
#div3{ _ (21) (0.866,0.5,-0.5,0.866,20,20); 
/* x 轴 、y 轴 缩放 0 .866;x 轴 、y 轴 扭曲 0 .5 和 -0.5;x 轴 、y 轴 位 移 20px*/} 
td{text-align:left; _ (22) ;} 
</style> 
</head> 
<body> 
<h3>CSS3 2D 转 换 - 缩 放 、 扭 曲 、 和 矩阵 </h3><hr> 
<table border="1lpx" bordercolor="red" width="750px" height="200px"> 


<tr> 
<td> 
<div id="" class=""><p> 这 是 原 div</p></div> 
<div id="divl" class=""><p> 这 个 div 缩 放 1.5 售 </p></div> 
</td> 
<td> 
<div id="" class=""><p> 这 是 原 div</p></div> 
<div id="div2"” class=""><p> 这 个 div 扭 曲 方法 </p></div> 
</td> 
<td> 
<div id="" class=""><p> 这 是 原 div</p></div> 
<div (23) class=""><p> 这 是 div 采 用 matrix 方 法 </p></div> 
</td> 
</tr> 
</table> 
</body> 
</html> 


四 、 编 程 题 (12 分 ) 
1. 表单 编程 (6 分 )。 
编程 实现 课程 教学 反馈 页 面 ， 布 局 效果 如 图 B-6 所 示 。 要 求 如 下 : 


Web 前 端 开发 技术 教学 反馈 





学 号 : 姓名 : | 性 别 : 


教学 反馈 意见 : 
请 输入 意见 




















图 B-6 教学 反馈 表 


(1) 页 面 标题 为 “Web 前 端 开 发 技术 教学 反馈 ”。 

(2) 表单 中 添加 2 个 文本 框 、2 个 单 选 按钮 、1 个 多 行文 本 区 域 、1 个 提交 按钮 、1 个 
重 置 按钮 ， 其 中 学 号 文本 框 最 大 长 度 为 10、 姓 名 文本 框 最 大 长 度 为 8、 多 行文 本 区 域 为 4 
行 60 列 ， 性 别 : 两 个 单 选 按钮 ( 男 、 女 )。 

(3) 用 3 号 标题 设置 页 面 上 的 “Web 前 端 开发 技术 教学 反馈 ”。 

2. JavaScript 编程 (6 分 ) 

计算 所 有 能 被 17 整除 的 3 位 整数 的 和 ， 如 图 B-7 所 示 。 

(1) 编写 sum30 函 数 ， 实 现 计算 所 有 能 被 17 整除 的 3 位 整数 的 和 ， 要 求 采 用 do while 
循环 结构 进行 编程 ; 








wa we 

(JOP wm? 90- ox] rnc. |) 
计算 所 有 能 被 17 整 除 的 3 位 整数 的 和 
满足 条 件 的 3 位 整数 有 : 

Me 102 119 136 153 170 187 204 221 238 255 272 289 306 323 340 357 374 391 408 425 
442 459 476 493 510 527 544 561 578 595 612 629 646 663 680 697 714 731 748 765 
782 799 816 833 850 867 884 901 918 935 952 969 986 
所 有 能 被 17 整 除 的 3 位 整数 的 和 =28832 








图 B-7 计算 满足 条 件 的 整数 和 


(2) 采用 4 号 标题 字 显示 标题 ; 

(3) 在 循环 体内 依次 输出 满足 条 件 的 数 ; 

(4) 将 计算 结果 直接 输出 在 页 面 上 。 

五 、 问 答题 (12 分 ) 

1. 简 述 有 序列 表 的 定义 语法 ， 并 说 明 有 序列 表 的 编号 有 几 种 ， 分 别 是 什么 。(5 分 ) 
2. 举例 说 明 CSS 中 边界 margin 的 多 种 定义 方法 。(4 分 ) 

3. 举例 说 明 window 对 象 中 常用 的 消息 框 函数 。(3 分 ) 


四 六 尿 


秦 放 研 准 2 (120 分 ) 
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